<template>
	<!-- 键盘监听输入代码 -->
	<view class="page-bg-hy" :class="deviceType=='pad' ? 'isPad' : ''">
		<view class="page-hy" @click="focusClicked">
			<!-- 键盘监听输入框 -->
			<view class="input-content-back" v-if="platform == 'ios'">
				<input v-model="inputValue" maxlength="1" type="password" class="input-class" :focus='focusState'
					:auto-blur="false" :show-confirm-bar="false" @input="inputChange" @confirm="enterClicked"
					@keydown.enter="enterClicked" inputmode="none"> </input>
				<input v-model="inputValue1" maxlength="1" type="password" class="input-class" :focus='focusState2'
					:auto-blur="false" :show-confirm-bar="false" @input="inputChange" @confirm="enterClicked"
					@keydown.enter="enterClicked" inputmode="none"> </input>
			</view>
			<navbar :title="game_mode_1" :close-confirm="true" @leaveRoom="fnLeaveRoom" />
			<view class="top-hr" style="height: 0px;"></view>

			<!-- 踢人提示 -->
			<!-- <uv-modal ref="modal" title="温馨提示" content='您已被房主踢出房间,即将返回上一页' @confirm="tirenConfirm"></uv-modal> -->

			<!-- 结束游戏遮罩层 -->
			<uv-overlay :show="allFinished==true">
				<view class="" style="height: 100%;width:100%;">
					<view @click="fnFinishGame()" class="" v-if="yanhuaShow==true" id="yanhuaBox"
						style="position: absolute;width: 100%;height:100%;z-index: 102;">
						<yanhua></yanhua>
					</view>
					<view class="warp"
						style="display: flex;flex-direction: column;position: absolute;z-index: 101;width: 100%;">
						<view class="rect" @tap.stop :style="backgroundStyle">
							{{currentTipMsg}}
						</view>
						<view v-if="currentTipMsg=='完成' || currentTipMsg=='优胜'" class="" @click="fnFinishGame()" style="background: linear-gradient(to top, #fff497, #ffd16b);
						padding: 8px 40px;
						border-radius: 23px;
						margin-top: 20px;
						font-family: hzgb;">
							确定
						</view>
					</view>
				</view>
			</uv-overlay>

			<!-- 倒计时弹窗 -->
			<popCountdownView v-if="showCountdownDialog" :msg="countdownMessage"></popCountdownView>
			<!-- alert弹框 -->
			<popPromptBox v-if="showAlertDialog" :msg="alertMessage" @confirm="fnCancelAlert()"></popPromptBox>
			<!-- alert弹框 -->
			<popPromptBox v-if="showMessageView" :msg="alertMessageStr" @confirm="cancelAlert()"></popPromptBox>

			<!-- 网络检测弹框 -->
			<popNetworkBox v-if="showNetworkDialog" msg="网络异常" @tuichu="fnTuichu()" @tryagain="fnTryagain()">
			</popNetworkBox>

			<!-- 确认弹框 -->
			<selectContentView v-if="showConfirmDialog" :msg="confirmMessage" confirmTitle="是" cancelTitle="否"
				@confirm="fnConfirmLeave()" @cancel="fnCancelLeave()"></selectContentView>

			<!-- 确认踢人弹框 -->
			<selectContentView v-if="showConfirmDialogOfTiren" msg="确定要踢人吗？" confirmTitle="是" cancelTitle="否"
				@confirm="fnConfirmTiren()" @cancel="fnCancelTiren()"></selectContentView>

			<uv-overlay v-if="allFinished==false" :show="loadingStatus==true">
				<view class="warp" style="color: red;">
					<view v-if="mlbs_gameStatus==1" class="loading-class">
						赛前准备中，请稍作等待
						<view class="quit-btn" @click="fnLeaveRoomV2()">
							退出房间
						</view>
					</view>
					<view v-if="mlbs_gameStatus>1&&mlbs_gameStatus<5" class="loading-class">
						题目准备中，请稍作等待
					</view>
					<view v-if="isShowVoicePopView" class="loading-class">
						发音官正在发音，请稍作等待
					</view>
				</view>
			</uv-overlay>

			<!-- 每轮结束时，信息展示 -->
			<uv-overlay v-if="allFinished==false" title="22222" :show="currentRoundInfoShow==true">
				<!-- <uv-overlay :show="true"> -->
				<view class="rank-scroll-back">
					<view class="rank-bg">
						<scroll-view scroll-y="true" style="width: 100%; height: 100%;">
							<view class="rank-popview">
								<view class="rank-title">
									Round {{mlbs_round}}
								</view>
								<view class="rank-second">
									（{{tip_close_time}}秒后关闭）
								</view>
								<view class="rank-content-title">
									<view class="player-info-title">
										选手信息
									</view>
									<view class="promotion-title">
										答题状态
									</view>
								</view>
								<view class="line-view">
								</view>
								<view class="user-back" v-for="(item, index) in user_list" :key="index">
									<view class="userInfo-back">
										<view class="userInfo-left">
											<image class="avatar" src="../../../static/image/fjj/avatar.png"></image>
											<view class="userinfo-class">
												<view class="userinfo-name">
													{{item.username}}
												</view>
												<view class="userinfo-num">
													拼词：{{item.answer}}
												</view>
											</view>
										</view>
										<!-- <view :class="`${word.isCorrect == 0 ? 'right' : 'error'} weizhi`"> -->

										<view
											:class="`${item.is_promotion == 1 ? 'promotion' : 'elimination'} promotionStr`">
											{{item.is_promotion == 1 ? '晋级' : '淘汰'}}
										</view>
									</view>
									<view class="line-view">

									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</uv-overlay>

			<view class="main" :style="{ height: scrollHeight + 'px'}">
				<uv-notify ref="uNotify" message="Hi uView" type="success"></uv-notify>

				<view class="level_item level_1">
					<view style="display: flex;flex-direction: row;align-items: center;width: 100%;">
						<view class="" style="width: 100px;display: flex;flex-direction: column;">
							<titleBar :title="group_info.zubieName" :titlefs="16" :remark="group_info.zubieEnName"
								:remarkfs="8"></titleBar>
							<!-- remark 8px -->
						</view>
						<view class="" style="flex: 1;position: relative;">
							<!-- 倒计时进度条 -->
							<uv-line-progress :percentage="downtime_percentage" :showText="false"
								activeColor="#f73c69"></uv-line-progress>
							<view
								style="position: absolute;width: 100%;bottom: -30px;color: white;white-space: nowrap;font-size: 16px;font-family: hzgb;">
								{{game_mode_2}}｜{{ game_mode_2 === '联机模式' ? 'Online Mode' : 'Training Mode' }}
								<!-- {{gameStatus}} -->
								<!-- {{group_info.id}} : {{user_info.id}} -->
							</view>
						</view>
						<view class="" style="width: 100px;display: flex;flex-direction: column;">
							<titleBar :title="downtime+'s'" :titlefs="20" remark="Times" :remarkfs="8"></titleBar>
						</view>
					</view>
				</view>
				<!-- /static/image/app/test_starting_new.png -->
				<view class="level_item level_2"
					:style="{backgroundImage: 'url(' + (mlbs_gameStatus>3 ? '' : '/static/image/app/test_end_new.png') + ')'}"
					style="position: relative;align-items: flex-end;display: flex;width: 100%;">
					<view class="yellow_door" v-show="mlbs_gameStatus>3">
						<view class="yellow_door_bg">
						</view>
					</view>

					<!-- user 占位 -->
					<view
						style="position:absolute;width: 100%;width: 100%;height: 100%;display: flex;flex-direction: column;">
						<view style="min-height: 87px;height: 87px;">
							<uv-scroll-list :indicator="indicator">
								<view class="scroll-list"
									style="flex-direction: row;width: 100%;justify-content: space-between;">
									<view class="scroll-list__goods-item" v-for="(item, index) in user_list"
										:key="index" :class="{
										'active-user': item.id==mlbs_user_group_id,
									}">

										<block v-if="mlbs_gameStatus<=3">
											<block v-if="item.username!='空位置'">
												<view class="scroll-list__goods-item__text"
													style="font-size: 14px;font-family: hzgb;color: white;height: 16px;">
													<!-- {{item.username}} -->
													<view v-if="item.user_id == user_info.id">我</view>
													<view v-else>{{item.username}}</view>
												</view>
												<view class="scroll-list__goods-item__text ok-btn"
													:class="{fangzu:item.user_id==group_info.user_id}">
													<image v-if="item.user_id==group_info.user_id" class="huangguan"
														src="../../../static/image/huangguan.png" alt="" />
													<block v-if="item.status > 0">
														<text>
															已准备
														</text>
													</block>
													<block v-else>
														<text @click="fnTiRen(item,index)">
															未准备
														</text>
													</block>
												</view>
											</block>
											<block v-else>
												<view class="scroll-list__goods-item__text ok-btn"
													style="background: none;">
													<text>
														<uv-loading-icon color="#ffffff" textColor="#ffffff"
															:vertical="true" :size="16" text="空"
															textSize="30rpx"></uv-loading-icon>
													</text>
												</view>
											</block>
										</block>
										<block v-else>
											<view class="scroll-list__goods-item__text"
												style="font-size: 14px;font-family: hzgb;color: white;height: 16px;">
												<!-- {{item.username}} -->
												<view v-if="item.user_id == user_info.id">我</view>
												<view v-else>{{item.username}}</view>
											</view>
											<view class="scroll-list__goods-item__text ok-btn">
												<block v-if="item.id==mlbs_user_group_id">
													<text style="color: red;">
														比赛中
													</text>
												</block>
												<block v-else>
													<text>
														等待中
													</text>
												</block>
											</view>
											<view class="score-view">
												正确：{{item.yes_num ? item.yes_num : '0'}}
											</view>
											<!-- TODO 该内容仅供开发人员参考 -->
											<view v-show="dev_btn_show" v-if="item.id==mlbs_user_group_id" class=""
												style="border: 1px solid green;font-size: 10px;">
												<view v-if="mlbs_user_id>0" class="">
													真人：{{mlbs_answer}}
												</view>
												<view v-else class="">
													机人：{{mlbs_answer}}
												</view>
											</view>
										</block>
									</view>
								</view>
							</uv-scroll-list>
						</view>

						<!-- 比赛开始前 -->
						<view v-if="mlbs_gameStatus<=3"
							style="text-align: center;display: flex;flex-direction: column;align-items: center;flex:1;overflow: hidden;">
							<view @click="fnTestTime()" class="btn-style"
								style="height: 30px;line-height: 30px;width: 130px;">
								房间号：{{group_info.id}}
							</view>
							<view class="btn-style"
								style="height: 40px;font-size: 26px;line-height: 40px;width: 252px;">
								{{user_list?user_list.length:1}} / {{group_info.people_num}}
							</view>
							<view class="btn-style" style="font-size: 20px;width: 179px;padding: 4px 0;">
								魔力部首
								<view class="title-en-common">Magic Component</view>
							</view>
						</view>

						<!-- 比赛开始后 -->
						<view v-if="mlbs_gameStatus>3" class="fengzai" style="flex:1;">
							<view class="btn-style2"
								style="font-family: hzgb;color: #000;font-size: 12px;margin-bottom: 8px;">
								<!-- 请在考官说出第一个单词读音后开始答题 -->
								<!-- 等待发音完毕后开始答题 -->
								<!-- {{currentWordIndex+1}}/{{test_wordlist.length}} -->
							</view>
							<view class="btn-style2" style="background: linear-gradient(to top, #373632, #130e00);
							border-radius: 24px;
							width: 90px;
							color: white;
							font-family: hzgb;
							font-size: 18px;
							height: 24px;
							line-height: 24px;">
								{{mlbs_round}}/{{mlbs_test_wordlist.length}}
							</view>
							<view class="answer-area"
								:class="answer_status === 'success' ? 'answer_success' : (answer_status === 'error' ? 'answer_error' : '')">
								<view class="answer-half" v-if="questionType === 'rt'">{{ questionHy }}</view>
								<view class="answer-box">{{ mlbs_inputting_content }}</view>
								<view class="answer-half" v-if="questionType === 'lf'">{{ questionHy }}</view>
								<!-- {{ mlbs_inputting_content }} -->
								<!-- {{ answer_status }} -->
							</view>
							<view class="clue-show" v-if="mlbs_wordlist">
								<view style="flex-wrap: wrap; gap: 10px;display: flex;flex-direction: row;">
									<view class="word-item" :class="{active:item.status}"
										v-for="(item, index) in mlbs_choice" :key="index"
										@click="chooseFn(item, index)">
										<view class="word-index" v-if="!item.status">{{item.value}}</view>
									</view>
								</view>
							</view>
							<view v-show="dev_btn_show" class="btn-style2" style="background: linear-gradient(to top, #373632, #130e00);
							border-radius: 28px;
							width: 216px;
							color: white;
							height: 30px;
							line-height: 30px;white-space: nowrap;">
								<block v-if="test_wordlist&&test_wordlist.length>0">
									{{test_wordlist[currentWordIndex].word}} 他的拼写：{{her_currentAnswer}}
								</block>
							</view>


							<!-- 第一行：  definition   word -->
							<view style="width: 100%;display: flex;flex-direction: row;">


							</view>

							<!-- 第二行：  sentence    -->
							<view style="width: 100%;display: flex;flex-direction: row;">


								<view
									style="width: 186px;color: black;margin-top: 20px;margin-top: -34px;margin-left: 0px;">
									<view v-show="dev_btn_show" class="" style="color: red;text-align: left;">
										<view style="white-space:nowrap;">
											抢答状态 {{mlbs_quick_answer_status}}: <text
												style="color:green;font-weight: bold;">
												{{mlbs_quick_answer_status==0?'可以抢':'不可以抢'}}</text>
										</view>
										<view style="white-space:nowrap;">
											主用户 : <text style="color:green;font-weight: bold;">
												{{mlbs_master_user_group_id}}</text>
										</view>
										<view style="white-space:nowrap;">
											当前用户 : <text style="color:green;font-weight: bold;">
												{{mlbs_user_id==user_info.id?'我':'他'}} {{mlbs_user_group_id}}</text>
										</view>
										<view style="white-space:nowrap;">
											答案 : <text style="color:green;font-weight: bold;">
												{{mlbs_answer}}</text>
										</view>
										<view>
											{{ mlbs_user_id }}|{{ user_info.id }}
										</view>
										<view style="white-space:nowrap;">
											切换人次数 : <text style="color:green;font-weight: bold;">
												{{mlbs_change_people_num}}</text>
										</view>
										<view style="white-space:nowrap;">
											答题倒计时 : <text style="color:green;font-weight: bold;">
												{{(mlbs_downtime5!=false&&mlbs_downtime5>=0)?mlbs_downtime5:''}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view v-if="deviceType=='phone'" class="mifeng" style="height: 200px;width: 100%;">
						<mifeng v-if="canvasheight>0" ref="uniWordList1">
						</mifeng>
					</view>
					<view v-if="deviceType=='pad'" class="mifeng" style="height: 600px;width: 100%;">
						<mifeng2 v-if="canvasheight>0" ref="uniWordList1">
						</mifeng2>
					</view>
					<!-- 播放音频按钮 -->
					<view class="play-btns" :class="mlbs_user_id == user_info.id ? 'canClick' : ''"
						v-show="mlbs_gameStatus>3">
						<view>
							<view class="ope-rt" @click="fnPlayDefinitionVoiceV2('user_click')">
								<view class="play-btn-icon">
									<image mode="aspectFit" v-show="playType!='definition'"
										style="width: 100%;height: 100%;" src="/static/image/app/voice.png"></image>
									<image mode="aspectFit" v-show="playType=='definition'"
										style="width: 100%;height: 100%;" src="/static/image/app/voiceing.png"></image>
								</view>
								<view class="btn-text">
									Definition
								</view>
							</view>

							<!-- <view class="ope-rt" @click="fnPlayWordVoiceV2('user_click')">
								<view class="play-btn-icon">
									<image mode="aspectFit" v-show="playType!='word'" style="width: 100%;height: 100%;"
										src="/static/image/app/voice.png"></image>
									<image mode="aspectFit" v-show="playType=='word'" style="width: 100%;height: 100%;"
										src="/static/image/app/voiceing.png"></image>
								</view>
								<view class="btn-text">
									Pinyin
								</view>
							</view> -->
						</view>
						<view>
							<view class="ope-rt" @click="fnPlaySentenceVoiceV2('user_click')">
								<view class="play-btn-icon">
									<image mode="aspectFit" v-show="playType!='sentence'"
										style="width: 100%;height: 100%;" src="/static/image/app/voice.png"></image>
									<image mode="aspectFit" v-show="playType=='sentence'"
										style="width: 100%;height: 100%;" src="/static/image/app/voiceing.png"></image>
								</view>
								<view class="btn-text">
									Sentence
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 游戏开始前 -->
				<view v-show="mlbs_gameStatus<=3" class="level_item level_3"
					style="position: relative;overflow: visible;">
					<view
						style="display: flex;flex-direction: column;align-items: center;width: 100%;height: 100%;padding-top: 10px;">

						<!-- 房主 -->
						<block v-if="user_info.id==group_info.user_id">
							<!-- 开始按钮 -->
							<view @click="fnStart()" class=""
								style="height: 125px;display: flex;flex-direction: column;position:relative;">
								<image mode="aspectFit"
									v-if="user_list&&yes_count==user_list.length&&user_list.length>=2"
									style="height: 100%;" src="/static/image/app/6yellow.png"></image>
								<image mode="aspectFit" v-else style="height: 100%;" src="/static/image/app/6gray.png">
								</image>
								<view style="position: absolute;
										width: 100%;
										justify-content: center;
										height: 100%;
										display: flex;
										font-size: 23px;
										align-items: center;
										font-family: hzgb;" :class="{startable:(user_list&&yes_count==user_list.length&&user_list.length>=2)}">
									<!-- {{startBtnText}} -->
									<view>
										{{startBtnText}}
										<view v-if="startBtnText === '开始'" class="title-en-common">Start</view>
									</view>
								</view>
							</view>
						</block>
						<!-- 非房主 -->
						<block v-if="user_info.id!=group_info.user_id">
							<!-- 准备按钮 -->
							<view v-show="current_user_info.status==0" @click="fnMyReady('准备就绪')" class=""
								style="height: 125px;display: flex;flex-direction: column;position:relative;">
								<image style="width: 110px;height: 125px;" src="../../../static/image/start.png"
									alt="" />
								<view style="position: absolute;
										color: #fff;
										width: 100%;
										justify-content: center;
										height: 100%;
										display: flex;
										font-size: 23px;
										align-items: center;
										font-family: hzgb;">
									<view>
										准备
										<view class="title-en-common">Prepare</view>
									</view>
								</view>
							</view>

							<!-- 已准备按钮 -->
							<view v-show="current_user_info.status==1" @click="fnMyReady('取消准备')" class=""
								style="height: 125px;display: flex;flex-direction: column;position:relative;">
								<image mode="aspectFit" style="height: 100%;" src="../../../static/image/ready.png">
								</image>
								<view style="position: absolute;
										color: #fff;
										width: 100%;
										justify-content: center;
										height: 100%;
										display: flex;
										font-size: 23px;
										font-family: hzgb;
										align-items: center;">
									<view>
										取消
										<view class="title-en-common">Cancel</view>
									</view>
								</view>
							</view>

							<view v-show="current_user_info.status==3" class=""
								style="height: 125px;display: flex;flex-direction: column;position:relative;">
								<image mode="aspectFit" style="height: 100%;" src="/static/image/app/6yellow.png">
								</image>
								<view style="position: absolute;
										color: white;
										width: 100%;
										justify-content: center;
										height: 100%;
										display: flex;
										font-size: 23px;
										align-items: center;
										font-weight: bold;">
									<!-- {{readyBtnText}} -->
									<view>
										{{readyBtnText}}
										<view v-if="readyBtnText === '已准备'" class="title-en-common">Ready</view>
									</view>
								</view>
							</view>
						</block>

						<view v-show="game_mode=='魔力部首|联机模式'" class=""
							style="flex: 1;position: relative;display: flex;align-items: center;color: white;font-family: hzgb;font-size: 13px;">
							<!-- 非房主 -->
							<block v-if="user_info.id!=group_info.user_id">
								<block v-if="yes_count==user_list.length">
									请耐心等待房主开始游戏
								</block>
								<block v-if="mlbs_gameStatus==0">
									请准备
								</block>
							</block>
							<!-- 房主 -->
							<block v-else>
								<view v-if="yes_count==user_list.length">
									<!-- 所有选手已准备就绪 -->
								</view>
								<view v-else>
									等待其他选手准备后才能点击开始
									<view class="btn-en">Wait for other spellers to prepare before you can click Start
									</view>
								</view>
							</block>
						</view>
						<view v-show="game_mode=='魔力部首|联机模式'" class=""
							style="height: 76px;display: flex;flex-direction: row;align-items: center;">
							<view style="flex: 1;"></view>

							<view style="width: 135px;" class="invite_copy" @click="fnCopyInviteUrl()">
								复制邀请链接
							</view>
							<view style="width: 50px;">
								<text class="donghuaType" style="color:#ffffff00;">{{donghua}}</text>
							</view>
							<view style="width: 135px;" class="invite_weixin" @click="fnWeixinInvite()">
								微信邀请
							</view>
							<view style="flex: 1;"></view>
						</view>
					</view>
				</view>

				<!-- 占位顶起fengzai -->
				<view v-show="mlbs_gameStatus>3" class="zhanwei"></view>
				<!-- 游戏开始后 -->
				<view v-show="mlbs_gameStatus>3" class="level_item qiangda-area">

					<!-- mlbs_user_group_id:有值，说明有人抢到正在作答，显示键盘或提示-->
					<block v-if="mlbs_user_group_id > 0">
						<!-- 提交按钮 -->
						<!-- {{mlbs_user_id}},{{user_info.id}},{{mlbs_select_item}} -->
						<view class="submitBtn"
							style="position: absolute;top:-75px;width: 85px;z-index: 10px;z-index: 100;">
							<!-- 	:style="{marginLeft:submitPositionLeft+'px'}" -->
							<view class="hexagon"
								v-show="mlbs_user_id==user_info.id && mlbs_select_item > 0 && mlbs_select_item==mlbs_item"
								@click="fnSubmit()">
								<view class="pass">
									提交
								</view>
							</view>
						</view>
						<block>
							<!-- <keyboard ref="keyboard"
								v-show="mlbs_user_id==user_info.id && mlbs_select_item>0 && mlbs_select_item==mlbs_item"
								@input="fnClickKeyboard" :currentKey="currentKey" @playStates="voicePlay">
							</keyboard> -->
							<!-- <view v-show="mlbs_user_id==user_info.id" class="pop-message-class">
							您的答题阶段，请准备！
						</view> -->
							<view v-show="mlbs_user_id!=user_info.id" class="pop-message-class">
								对方答题阶段，请稍作等待
							</view>
							<view v-show="mlbs_user_id==user_info.id && mlbs_select_item==0" class="pop-message-class">
								请选择错拼单词
							</view>
						</block>
						<!-- <block v-if="game_mode=='魔力部首|训练模式'">
						<keyboard @input="fnClickKeyboard" ref="keyboard" :currentKey="currentKey"
							@playStates="voicePlay">
						</keyboard>
					</block> -->
					</block>

					<!-- mlbs_user_group_id:无值，说明无人作答， -->
					<!-- mlbs_quick_answer_status 0-可以抢答 1-不可以抢答 -->
					<block v-else>
						<!-- 抢答按钮 -->
						<view @click="fnQuiz()" class=""
							style="height: 104px;display: flex;flex-direction: column;position:relative;">
							<image mode="heightFix" v-if="mlbs_quick_answer_status == '0'" style="height: 100%;"
								src="/static/image/app/6pink.png"></image>
							<image mode="heightFix" v-else style="height: 100%;" src="/static/image/app/6gray.png">
							</image>
							<view class="qiangdabtn">
								<view>
									{{quizBtnText}}
									<view v-if="quizBtnText === '抢答'" class="title-en-common">Quiz</view>
								</view>
							</view>
						</view>
						<view class="qiangda-time" v-if="mlbs_quick_answer_status == '0'">{{ mlbs_qiangda3 }}s</view>
					</block>

				</view>
				<view class="countdown" v-if="mlbs_user_id == user_info.id && mlbs_downtime5>0">
					倒计时：{{(mlbs_downtime5!=false&&mlbs_downtime5>=0)?mlbs_downtime5:''}}s</view>
			</view>
			<keyboardListener v-if="platform == 'android'" @keydown="listenOnKeydown"></keyboardListener>
			<!-- <keyboardListener v-if="platform == 'android'" @keyup="listenOnKeyup"></keyboardListener> -->
			<popRules v-if="showTips" :msg="rules" :title="game_info.name+'游戏规则'" @close="showTips = false"
				@confirm="showTips = false">
			</popRules>
		</view>
	</view>
</template>
<script>
	var heartbeat_count = 0;
	import keyboard from '../../../components/games/keyboard.vue'
	import titleBar from '../../../components/games/title-bar.vue'
	import navbar from '../../../components/gamesNav.vue'
	import mifeng from '../../../components/games/mifeng.vue'
	import mifeng2 from '../../../components/games/mifeng2.vue'
	import yanhua from '../../../components/games/yanhua.vue'
	import popRules from '../../../components/popRules.vue'
	import keyboardListener from '../keyboard-listener.vue'
	var recognizer = uni.requireNativePlugin("RY-TencentSentenceRecognizer");

	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	// import keyboardListener from 'uniapp-keyboard-listener'
	export default {
		config: {
			disableScroll: true
		},
		onBackPress(options) {
			var that = this;
			// 点击虚拟键或者侧滑的时候触发（不允许返回）
			if (options.from === 'backbutton') {
				// 询问弹窗
				that.fnLeaveRoom();
				return true
			}
			// 否则则允许返回
			return false;
		},
		components: {
			keyboard,
			titleBar,
			navbar,
			mifeng,
			mifeng2,
			popRules,
			yanhua,
			keyboardListener
		},
		computed: {
			game_mode_1() {
				return '蜂竞技-' + this.game_mode.split('|')[0]
			},
			game_mode_2() {
				return this.game_mode.split('|')[1]
			},
			backgroundStyle() {
				return {
					backgroundImage: this.currentTipMsg == '完成' || this.currentTipMsg == '优胜' ?
						'url("../../../static/image/done.png")' : 'none'
				};
			}
		},
		watch: {
			mlbs_user_group_id(newVal, oldVal) {
				var that = this;
				that.allowInput = true;
				that.selectAble = true;
				that.donghua = "donghua_daiji";
				that.answer_status = "";
			},
			mlbs_index(newVal, oldVal) {
				var that = this;
				that.allowInput = true;
				that.selectAble = true;
				that.donghua = "donghua_daiji";
				that.answer_status = "";
			},
			mlbs_round(newVal, oldVal) {
				console.log("222222222222222222222222222222222轮次切换")
				var that = this;
				that.answer_status = "";
				that.currentAnswer = '';
				that.her_currentAnswer = '';
				that.her_submit = false;
				that.canClickHandler = true;
				that.clueStatus = 1
			},
			startRecording(newVal, oldVal) {
				var that = this;
				console.log('startRecording 改变了1', newVal);
				if (newVal == true) {
					var current_time = new Date().getTime();
					var diff_time = current_time - that.last_time;
					console.log('diff_time1=' + diff_time)
					if (diff_time > 2000) {
						that.startRecord();
						that.statrAnimation();
					} else {
						that.resetPercent();
						uni.showToast({
							title: '操作频繁，‌请稍后再试~',
							icon: 'error'
						})
						that.startRecording = false
						that.last_time = new Date().getTime();
					}
				} else {
					that.last_time = new Date().getTime();
					that.stopRecord();
					that.sheetStyle = "";
				}
			}
		},
		data() {
			return {
				mlbs_choice: [],
				selectAble: true,
				deviceType: '',

				// 键盘监听
				focusState: true,
				focusState2: false,
				inputValue: '',
				inputValue1: '',

				// 抢答按钮
				quizBtnText: '抢答',
				quizCountDown: false, // 抢答倒计时按钮


				// 一句话识别
				secretKey: 'V2X3d8ulhirvtkVFtPygTJa0Nl6bCHVe',
				secretId: 'AKIDDYp3Nf0FR4vpeNzW9gK1oYSMCHONMKNB',
				appId: '1323065199',
				filePath: '',
				startRecording: false,
				sheetStyle: '',

				canClickHandler: true, //点击处理锁

				start_time: '',
				end_time: '',
				last_time: '',

				rules: `裁判确认双方选手准备完毕后，开始本轮比赛。首先，发音官将给出单词的发音和定义，再次重复该单词的发音后开始计时（1分钟）。然后，两名选手需按照裁判的手势依次交替拼出该单词的每个字母，选手需要在单词拼读完后点击确认，以此作为拼读的结束。接下来，如果双方选手正确完整拼读出该单词，双方各获得一个比分；如选手在拼词时出现错误答案，或超过5秒未能给出正确答案，视为答题失败，其对手则获得单独拼词机会，需完整拼读出该单词所有字母；此时，该选手可以在开始拼读前再次询问该单词的发音，如这名选手给出正确答案，将获得一个比分，如在规定时间内未给出正确答案，视为答题失败，双方均不得分。然后进行下一题。本轮比分较高的一方将获得一个积分；如果双方选手本轮比分相同，则各获得一个比分`,
				showTips: false,
				isBeginGameClick: false,
				userList: [1, 2, 3, 4, 5, 6, 7, 8],
				game_mode: '',
				round: '',
				currentTipMsg: '',
				currentKey: '',
				game_finished: 0,
				submitPositionLeft: 0,
				fayinguan_volume_value: uni.getStorageSync('fayinguan_volume_value') >= 0 ? uni.getStorageSync(
					'fayinguan_volume_value') : 1,

				currentRoundInfoShow: false,

				her_submit: false, //对方是否提交

				disableSwipeBack: true, // 禁用右滑返回
				game_config: {},
				dev: false, //开发，模式
				dev_btn_show: 0,
				isShowVoicePopView: false, // 是否显示发音官发音遮罩层
				isPlaySecondWord: false, // 是否第二遍读word
				canSubmit: false, //是否可以点击提交
				allowInput: false, // 是否允许输入
				wsStatus: true, //websocket状态

				// socket
				isSuccess: false,
				allReadyStatus: false, //所有人的准备状态
				isClose: false, //如何为true则不需要进行重连  // 初始化为 false   在 beforeDestroy 生命周期钩子中，你应该将 this.isClose 设置为 true，以防止在组件销毁后继续尝试重新连接 WebSocket。
				heartbeat_count: 0,
				reconnectThrottle: null, //为了避免在短时间内多次重连，可以使用节流机制来限制重连频率。
				networkStatus: true,

				// 网络检测
				showNetworkDialog: false,


				audioContext: null, //音频对象
				playType: '',
				zhudongClick: false, //是否是用户主动点击播放音频
				no_num: 0, //答对的单词数
				yes_num: 0, //答错的单词数
				answer_status: '', //回答的判断  正确answer_success   错误answer_error
				timeData: {},

				finishShow: false, //完成遮罩
				allFinished: false, //全部完成答题
				yanhuaShow: false,

				loadingStatus: true, //加载状态
				loadingBgColor: '#ffffff60',
				loadingText: '请稍后...',

				letter_info: {},

				// 自定义弹框组件
				showConfirmDialog: false,
				confirmMessage: '',
				showAlertDialog: false,
				alertMessage: '将为您返回游戏大厅',
				alertMessageStr: '',
				showMessageView: false,
				// 踢人确认弹框
				showConfirmDialogOfTiren: false,
				tiren_user_id: '',


				// ws返回数据
				mlbs_ok_status: '', // 回答正确|错误
				mlbs_quick_answer_status: '', // 是否可以抢答 0可以 1不可以
				mlbs_downtime5: '', // 5秒倒计时，直接显示就可以
				mlbs_master_user_id: '', // 先抢到的用户id
				mlbs_master_user_group_id: '', // 先抢到的用户的user_group_id, 配合mlbs_user_id用，如果是机器人的话，需要跟据这个字段来区分，比如有两个机器人的话，mlbs_user_id都是0，只能根据这个字段来区分
				mlbs_user_id: '', // 当前用户的id，    可以和user_info.id==mlbs_user_id 来判断是否是当前用户
				mlbs_user_group_id: '', //当前用户的user_group_id, 配合mlbs_user_id用，如果是机器人的话，需要跟据这个字段来区分，比如有两个机器人的话，mlbs_user_id都是0，只能根据这个字段来区分
				mlbs_round: '', // 当前轮次，也相当于当前回答到第几个单词了
				mlbs_index: '', // 当前用户的索引，比如有两个人的话，那这个值就是 0 1 0 1 0 1.....这样轮换
				mlbs_test_wordlist: [], // 5个单词的列表
				mlbs_wordlist: [], // 当前回答的这个单词的列表，暂时也用数组，为了跟其他游戏保持一致，暂时先这样用
				mlbs_choice: [],
				mlbs_answer: '', // 当前的答案  比如apple  你是第二个人，那当你答的时候，这个值就是p    当有人答错，下个人答的时候，这个值就是apple
				mlbs_inputting_content: '', // 当前input框里面的值，直接显示就可以
				mlbs_change_people_num: 0, //切换人次数
				mlbs_select_item: '', // 选手选择的选项
				mlbs_item: '', // 正确选项
				mlbs_type_id: '', // 当前题的组别id
				mlbs_zubieName: '', // 组别名称
				mlbs_zubieEnName: '', // 组别英文名称
				mlbs_gameStatus: 1, //游戏状态：0未准备 1已准备 3开始前的-3秒倒计时 5进行中-120秒倒计时  10等待中 11作题中 100已结束
				mlbs_qiangda3: 0, // 几秒无人抢答


				// 答题列表
				test_wordlist: [],
				currentWordIndex: 0, //当前答题索引
				round: 1, //当前轮次

				user_info: {}, //用户信息
				//群组信息
				group_info: {},
				game_info: {},
				canvaswidth: 0, //画布宽
				canvasheight: 0, //画布高

				countdownMessage: '', //下一题开始前倒计时
				showCountdownDialog: false, //是否显示下一题开始前的倒计时
				downtime_3: 3, // 1、点开始后的3秒倒计时，计时结束，开始播放音频，首个音频结束开始120倒计时 2、抢答阶段，抢答之前的3s倒计时，计时结束后可以抢答
				// downtime_120: 120, //点开始后的120秒倒计时，计时结束，比赛结束
				downtime: 60, //点开始后的120秒倒计时，计时结束，比赛结束
				downtime_percentage: 100, //倒计时百分比
				word: 'apple',
				currentWord: 'apple',
				currentAnswer: '',
				her_currentAnswer: '', //对方所拼记录
				scrollHeight: 999999,
				level3Height: 0,
				gameWidth: 0,
				startBtnText: '开始', //开始按钮文本内容
				readyBtnText: '已准备', //已准备按钮文本内容

				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,

				indicator: false,
				yes_count: 0, //已准备人数
				no_count: 0, //未准备人数
				none_count: 0, //空位人数
				current_user_info: {},
				user_list: [
					// {
					// 	user_id: '10001',
					// 	username: '张三',
					// 	status: 1 // 1已准备 0未准备 -1占位
					// }, {
					// 	user_id: '10002',
					// 	username: '李四',
					// 	status: 1 // 1已准备 0未准备 -1占位
					// },
				],
				jinji_user_list: [],
				taotai_user_list: [],
				tip_close_time: 0,
				tip_round: 0,
				isPosting: false,

				platform: '',
				donghua: 'donghua_daiji',
				game_id: '',
				clueStatus: 1, // 显示线索1（首字母+字母数量）、2（第二个字母+词性）、3（单词定义）、4线索展示完毕比赛进行中
				questionHy: '',
				questionType: '',

				// 答题数据
				"wordlist": [{
					"creator": "http://",
					"updateTime": "2024-05-15 14:50:09",
					"isDelete": 0,
					"id": "13042",
					"spell": "apple",
					"def": "having no stain or blemish",
					"exp": "She had an immaculate record of service.",
					"internationalPhoneticAlphabet": "/ɪˈmækjələt/",
					"level": 2,
					"partofSpeech": "adj.",
					"numberofLetters": "10",
					"syllables": 4,
					"prefixes": "im",
					"suffixes": "te",
					"state": 8,
					"kernel": false,
					"purl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3",
					"durl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate2.mp3",
					"eurl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate3.mp3"
				}, {
					"creator": "http://",
					"updateTime": "2024-05-15 14:50:09",
					"isDelete": 0,
					"id": "13042",
					"spell": "oriange",
					"def": "having no stain or blemish",
					"exp": "She had an immaculate record of service.",
					"internationalPhoneticAlphabet": "/ɪˈmækjələt/",
					"level": 2,
					"partofSpeech": "adj.",
					"numberofLetters": "10",
					"syllables": 4,
					"prefixes": "im",
					"suffixes": "te",
					"state": 8,
					"kernel": false,
					"purl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3",
					"durl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate2.mp3",
					"eurl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate3.mp3"
				}]
			};
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.top-hr').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
				that.submitPositionLeft = uni.getSystemInfoSync().windowWidth / 2 - 96 / 2;
			}).exec();
		},

		mounted() {
			const that = this

			that.deviceType = that.$util.getDeviceType();

			that.letter_info = uni.getStorageSync('letter_info');
			setTimeout(function() {
				uni.createSelectorQuery().select('.level_2').boundingClientRect(rect => {
					// console.log('rectxxxxxxxxxxxxxxxxxxxxxxxxx', JSON.stringify(rect))
					that.canvaswidth = rect.width;
					that.canvasheight = rect.height;
				}).exec();
			}, 500)

			if ('创建一个音频对象') {
				that.audioContext = uni.createInnerAudioContext();
				// that.audioContext.src = '';
				// that.audioContext.loop = true;

				// 监听错误事件
				that.audioContext.onError((res) => {
					// console.error('音频加载或播放错误', res);
					//MediaError（媒体错误）：表示音频播放过程中出现了媒体相关的错误。
					if (res && res.errMsg == 'MediaError') {

					}
					// SrcError（资源路径错误）：表示音频资源路径设置不正确的错误
					if (res && res.errMsg == 'SrcError') {
						uni.showToast({
							title: 'SrcError，请重试~',
							icon: 'error'
						})
					}
					if (
						that.audioContext.src != '/static/mp3/correct.mp3' &&
						that.audioContext.src != '/static/mp3/error.mp3'
					) {
						that.donghua = 'donghua_daiji';
					}
					setTimeout(function() {
						that.loadingStatus = false;
						that.zhudongClick = false;
						that.playType = '';
						that.donghua = 'donghua_daiji';
					}, 1000)
				});

				// 监听音频开始播放事件
				that.audioContext.onPlay(() => {
					if (that.zhudongClick == false && that.playType == 'word') {
						// that.loadingStatus = true;
					}

					// console.log('音频开始播放', that.audioContext.src);
					if (
						that.audioContext.src != '/static/mp3/correct.mp3' &&
						that.audioContext.src != '/static/mp3/error.mp3'
					) {
						that.donghua = 'donghua_shuohua';
					}

					// 可以在这里进行开始播放后的逻辑处理
				});

				// 监听播放中事件
				that.audioContext.onTimeUpdate(() => {
					// console.log('音频正在播放');
					// 判断是发音官还是音效
					if (
						that.audioContext.src == '/static/mp3/correct.mp3' ||
						that.audioContext.src == '/static/mp3/error.mp3'
					) {
						if (uni.getStorageSync('yinxiao_volume_status') == false) {
							that.audioContext.volume = 0;
						} else {
							that.audioContext.volume = uni.getStorageSync('yinxiao_volume_value');
						}
					} else {
						if (uni.getStorageSync('fayinguan_volume_status') == false) {
							that.audioContext.volume = 0;
						} else {
							that.audioContext.volume = uni.getStorageSync('fayinguan_volume_value');
						}
					}
				});

				// 监听音频播放完毕事件
				that.audioContext.onEnded(() => {

					// console.log('音频播放完毕');
					if (
						that.audioContext.src != '/static/mp3/correct.mp3' &&
						that.audioContext.src != '/static/mp3/error.mp3'
					) {
						that.donghua = 'donghua_daiji';
					}

					// 可以在这里进行播放完毕后的逻辑处理
					if (that.zhudongClick == false && that.playType == 'word') {
						// var content = '答题开始';
						// content = "#" + content + "#-" + that.currentWordIndex;
						// that.fnNotify(content);
						// that.fnSendMessage(content);
					}
					// console.log('that.isPlaySecondWord', that.isPlaySecondWord);
					// 重置状态
					that.zhudongClick = false;
					that.playType = '';
					that.donghua = 'donghua_daiji';
				});
			}

			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'game'
			})
		},
		onLoad(options) {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					const platform = res.platform.toLowerCase(); // 全部转化为小写字母 ios/android
					that.platform = platform
				}
			})
			// // #ifdef APP-PLUS
			// plus.key.addEventListener("keydown", function(e) {
			// 	var keyStr = that.$util.turnKeyCode(e.keyCode);
			// 	that.onKeyup(keyStr);
			// 	console.log('keyStr===========', keyStr);
			// }, false);
			// // #endif 
			// // #ifdef H5
			// document.addEventListener("keydown", function(e) {
			// 	var keyStr = that.$util.turnKeyCode(e.keyCode);
			// 	that.onKeyup(keyStr);
			// }, false);
			// // #endif
			that.user_info = JSON.parse(uni.getStorageSync('USER_INFO'));
			that.group_info = JSON.parse(decodeURIComponent(options.group_info));
			that.game_info = JSON.parse(decodeURIComponent(options.game_info));
			that.game_mode = options.game_mode;
			console.log("game_info================");
			console.log(that.game_info);

			that.headerTitle = '蜂竞技-' + that.game_mode;
			if (that.game_mode == '') {
				uni.showToast({
					title: '游戏模式异常'
				})
				return false;
			}

			// 获取房间数据，查看比赛是否结束，如果结束，直接返回上一页
			that.getGroupInfo();
			that.getGameConfigInfo();

			// 监听事件
			that.$eventBus.$on('callMethodIn_fayinguan_volume', (data) => {
				console.log('----------------调用指定方法', data, data.volume)
				// 调用指定方法:播放背景音乐
				that.fayinguan_volume_value = data.volume;
				console.log('currentVolume:', that.fayinguan_volume_value);
				that.audioContext.volume = that.fayinguan_volume_value;
			})
			that.init();
		},
		onShow: function() {
			var that = this;
			if (this.focusState == true) {
				this.focusState = false;
				this.focusState2 = true;
			} else {
				this.focusState = true;
				this.focusState2 = false;
			}
			that.getGameConfigInfo();

			that.$http.getGroupInfo({
				'group_id': that.group_info.id,
				'game_mode': that.game_mode
			}).then(res => {
				if (res.code === 200) {
					that.group_info.zubieName = res.data.zubieName;
					that.group_info.zubieEnName = res.data.zubieEnName;
					console.log(that.group_info)

					// 获得game_id
					this.game_id = res.data.game_id

					if (res.data.is_finished == 0) {

					} else {
						that.finishShow = true;
						that.allFinished = true;
					}
				}
			})


			that.$eventBus.$emit('callMethodIn_background_type', {
				pageType: 'game_page'
			})
		},
		created() {
			var that = this;
			that.$eventBus.$on('network_event', that.handleNetworkEvent);
		},
		beforeDestroy() {
			var that = this;
			// 移除监听器
			that.$eventBus.$off('network_event', that.handleNetworkEvent);

			console.log('beforeDestroy')

			that.isClose = true;

			if (this.socketTask) {
				this.socketTask.close();
			}
			clearInterval(this.timer);
			that.timer = null;
		},
		methods: {
			// 网络检测 start====================================
			fnTuichu: function() {
				console.log('fnTuichu')
				this.showNetworkDialog = false;
				this.fnLeaveRoom();
			},
			fnTryagain: function(e) {
				console.log('fnTryagain', this.$util.getNetWorkStatus())
				this.showNetworkDialog = !this.$util.getNetWorkStatus();
			},
			handleNetworkEvent() {
				var that = this;
				that.networkStatus = uni.getStorageSync('networkStatus')
				if (!that.networkStatus) {
					that.showNetworkDialog = true;
				} else {
					that.showNetworkDialog = false;
				}
				that.getGroupInfo();
			},
			// 网络检测 end====================================

			chooseFn(item, index) {
				if (this.isPosting) {
					return
				}
				this.isPosting = true
				var that = this;
				if (item.value != '') {
					if (this.mlbs_user_id == this.user_info.id) {
						if (item.status == true) {
							that.selectAble = true;
							item.status = false;


							var selectCount = 0;
							var selectStr = [];
							for (var i = 0; i < this.mlbs_choice.length; i++) {
								if (this.mlbs_choice[i].status) {
									selectCount++;
									selectStr.push(this.mlbs_choice[i].value);
								}
							}

							var content = "#取消选项#-" + selectStr.join('');
							console.log(content)
							console.log("=========1======1=========     " + content +
								"     ==================1========1========")
							this.fnNotify(content);
							this.fnSendMessage(content);
						} else {
							if (that.selectAble == false) {
								uni.showToast({
									title: '不可以选了',
									icon: 'error'
								})
								return false;
							}

							var selectCount = 0;
							var selectedList = [];
							for (var i = 0; i < this.mlbs_choice.length; i++) {
								if (this.mlbs_choice[i].status) {
									selectCount++;
									selectedList.push(this.mlbs_choice[i]);
								}
							}

							item.status = true;
							selectedList.push(item)

							console.log('selectedList', selectedList)

							if (selectedList.length == 2) {
								that.selectAble = false;
							}

							var selectStr = [];
							for (var i = 0; i < selectedList.length; i++) {
								selectStr.push(selectedList[i].value);
							}

							var content = "#选中选项#-" + selectStr.join('');
							console.log("=========1======1=========     " + content +
								"     ==================1========1========")
							this.fnNotify(content);
							this.fnSendMessage(content);
						}
					} else {

					}
				}
			},
			speechClicked() {
				this.startRecording = !this.startRecording;
			},
			// 键盘监听
			focusClicked() {
				this.focusState = !this.focusState;
				this.focusState2 = !this.focusState2;
			},

			// 一句话识别》》》》》》》》》》》》》》》》》》》》》》》》》》》》
			statrAnimation() {
				this.sheetStyle =
					'animation-name: circleChange;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: linear;'
			},
			stopOtherState() {
				this.donghua = 'donghua_daiji';
				// 重置状态
				this.zhudongClick = false;
				this.playType = '';
			},
			init() {
				var that = this;
				try {
					recognizer.init({
						appId: that.appId,
						secretId: that.secretId,
						secretKey: that.secretKey
					}, ret => {
						that.setSentenceRecognizerListener();
						// uni.showModal({
						// 	content: JSON.stringify(ret),
						// 	showCancel: false
						// });
					});

					recorderManager.onStop(function(res) {
						that.filePath = plus.io.convertLocalFileSystemURL(res.tempFilePath);
						// uni.showToast({
						// 	title: '录音文件为: ' + JSON.stringify(that.filePath),
						// 	position: "bottom"
						// });
					});
				} catch (e) {
					//TODO handle the exception
				}
			},

			// 判断字符串包含指定的多个字符串中的某一个就行
			fnSetTimeout(delay_time) {
				var that = this;
				if (!delay_time) {
					delay_time = 1000;
				}
				that.canClickHandler = false;
				setTimeout(function() {
					that.canClickHandler = true;
				}, 1000)
			},


			setSentenceRecognizerListener() {
				var that = this;
				recognizer.setSentenceRecognizerListener({}, ret => {
					if (ret.hasOwnProperty('eventType')) {
						// uni.showToast({
						// 	title: JSON.stringify(ret),
						// 	position: "top"
						// });
						uni.getSystemInfo({
							success: function(res) {
								uni.removeSavedFile({
									filePath: that.filePath,
									success: function() {
										console.log('成功删除本地音频文件');
									},
									fail: function(err) {
										console.log('删除本地音频文件失败：' + err.errMsg);
									}
								});

								var content = "";
								if (res.platform === 'android') {
									content = ret.resultData.Response.Result;
								} else if (res.platform === 'ios') {
									content = ret.text;
								}
								if (content) {
									var result = that.$util.fnCheckResultOnlyTips(content);
									if (result == 'word' && that.downtime > 2) {
										that.fnPlayWordVoiceV2();
									}
								}
							}
						});
					} else {
						// uni.showModal({
						// 	content: JSON.stringify(ret),
						// 	showCancel: false
						// });
					}
				});
			},
			removeSentenceRecognizerListener() {
				recognizer.removeSentenceRecognizerListener({}, ret => {
					uni.showModal({
						content: JSON.stringify(ret),
						showCancel: false
					});
				});
			},
			destroy() {
				recognizer.destroy({}, ret => {
					uni.showModal({
						content: JSON.stringify(ret),
						showCancel: false
					});
				});
			},
			recognize() {
				let that = this;

				if (that.filePath == '') {
					uni.showToast({
						title: '识别失败，请重试',
						position: "bottom"
					});
					return;
				}

				recognizer.recognize({
					filePath: that.filePath
				}, ret => {
					// uni.showModal({
					// 	content: JSON.stringify(ret),
					// 	showCancel: false
					// });
				});
			},
			startRecord() {
				var that = this;
				that.start_time = new Date().getTime();
				console.log('start_time==', that.start_time);
				that.stopOtherState();
				uni.showToast({
					title: '开始识别',
					position: "bottom"
				});
				recorderManager.start({
					format: 'mp3',
					duration: 600000, // 最长录音时长，单位为毫秒
				});
			},
			stopRecord() {
				var that = this;

				recorderManager.stop();
				that.end_time = new Date().getTime();
				var diff_time = that.end_time - that.start_time;
				if (that.end_time - that.start_time < 1000) {
					uni.showToast({
						title: '录音时长太短',
						icon: 'error'
					})
				} else {
					uni.showToast({
						title: '识别结束',
						position: "bottom"
					});
					setTimeout(function() {
						that.recognize();
					}, 100);
				}
			},
			playRecord() {
				let that = this;
				if (that.filePath == '') {
					uni.showToast({
						title: '没有录音可以播放，请录音',
						position: "bottom"
					});
					return;
				}

				innerAudioContext.src = this.filePath;
				innerAudioContext.play();

				uni.showToast({
					title: '播放录音',
					position: "bottom"
				});
			},
			// 一句话识别《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《


			fnTestTime() {
				var that = this;
				return false;
				var content = '测试定时器';
				content = "#" + content + "#";
				that.fnSendMessage(content);
			},

			voicePlay(value) {
				var that = this;
				console.log('value===============================', value);
				if (value.playType == 'play') {
					that.donghua = 'donghua_shuohua';
				} else {
					that.donghua = 'donghua_daiji';
				}
			},
			// 获取游戏配置信息
			getGameConfigInfo() {
				var that = this;
				that.$http.getGameConfigInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.game_config = res.data;
						that.dev = that.game_config.dev;
						that.dev_btn_show = that.game_config.dev_btn_show;
					}
				})
			},

			// 获取房间数据
			getGroupInfo() {
				var that = this;
				that.$http.getGroupInfo({
					'group_id': that.group_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.group_info.zubieName = res.data.zubieName;
						that.group_info.zubieEnName = res.data.zubieEnName;
						if (res.data.is_finished == 0) {
							// if(res.data.game_mode=='极速拼词|训练模式'){
							// console.log('xxxxxxxxxxxxxxxxx109991xxxxxxxxxxxxxxxxxxxxx', res.data.test_wordlist)
							// if (res.data.test_wordlist.length == 0) {
							// 	console.log('xxxxxxxxxxxxxxxxx109991xxxxxxxxxxxxxxxxxxxxx')
							// 	uni.showToast({
							// 		title: '该词库暂无数据，请换个词库试试',
							// 		icon: 'none'
							// 	})
							// 	return false;
							// }
							// }
							// 连接socket
							that.connectSocket()
						} else {
							that.finishShow = true;
							that.allFinished = true;
						}
					}
				})
			},
			listenOnKeydown(value) {
				if (this.platform === 'android') {
					console.log("value===============", value)
					if (value.key == " ") {
						this.startRecording = !this.startRecording;
						console.log('语音识别开始')
					} else {
						this.onKeydown(value.key, value.code);
					}
				}
			},
			// 全局监听外接键盘点击抬起事件
			// listenOnKeyup(value) {
			// 	if (this.platform === 'android') {
			// 		if (value.key == " ") { // 语音识别抬起结束
			// 			this.startRecording = false;
			// 			console.log('语音识别结束')
			// 		}
			// 	}
			// },
			// 键盘监听方法Start==========================
			inputChange: function(event) {
				console.log('this.value================', event.target.value)
				var value = event.target.value;
				var that = this;
				if (value.includes(" ") && !this.loadingStatus) {
					this.startRecording = !this.startRecording;
					setTimeout(function() {
						that.inputValue = '';
						that.inputValue1 = '';
					}, 50);
				} else {
					if (value.length == 1) {
						if (value == 1 || value == 2 || value == 3 || value == 4) {
							value = value + '';
						}
						this.processingValue(value);
					}
					setTimeout(function() {
						that.inputValue = '';
						that.inputValue1 = '';
					}, 50);
				}
			},
			// enter 点击事件
			enterClicked() {
				uni.hideKeyboard(); //隐藏软键盘	
				if (this.focusState == true) {
					this.focusState = false;
					this.$nextTick(function() {
						this.focusState2 = true;
					});
				} else {
					this.focusState2 = false;
					this.$nextTick(function() {
						this.focusState = true;
					});
				}
				this.processingValue('Enter')
			},
			// 处理点击回调
			processingValue(value) {
				this.onKeydown(value, '');
			},
			// 键盘监听End==========================

			// 全局监听外接键盘点击事件
			onKeydown(value, code) {
				var that = this;
				if (that.mlbs_gameStatus <= 3) {
					if (value == '?' || (value == 'Shift' && code == 'ShiftRight')) { // 准备
						if (this.user_info.id != this.group_info.user_id) {
							if (this.current_user_info.status == 0) {
								this.fnMyReady('准备就绪');
							} else if (this.current_user_info.status == 1) {
								this.fnMyReady('取消准备');
							}
						}
					} else if (value == 'Enter' && that.user_info.id == that.group_info.user_id) { // 开始
						if (that.showTips == true) {
							that.showTips = false;
						} else {
							that.fnStart()
						}
					} else if (value == 'Enter' && this.user_info.id != this.group_info.user_id) {
						if (this.showTips == true) {
							this.showTips = false;
						}
					}
				} else {
					if (value == 'Enter') {
						if (this.showMessageView == true) {
							this.showMessageView = false;
						} else if (this.allFinished == true) {
							this.finishShow = false; //完成遮罩
							this.allFinished = false; //全部完成答题	
							this.fnFinishGame();
						} else { // 游戏中点enter 没有弹窗就提交答案 
							// if (that.mlbs_answer.length > 1) {
							// 	this.fnSubmit();
							// }
							// mlbs_user_id==user_info.id && mlbs_select_item > 0 && mlbs_select_item==mlbs_item
							if (that.mlbs_user_id == that.user_info.id && that.mlbs_select_item > 0 && that
								.mlbs_select_item == that.mlbs_item) {
								this.fnSubmit();
							}
						}
					} else if (value == 'Shift' && code == 'ShiftLeft') { // 抢答
						that.fnQuiz()
					} else if (value == 'Z') { // 抢答/iOS
						that.fnQuiz()
					} else if (that.mlbs_user_id == that.user_info.id) {
						if (that.$util.isallowInput(value)) {
							if (value != '1' && value != '2' && value != '3' && value != '4') {
								var keyData = {
									e: {
										target: {
											dataset: {
												val: value
											}
										}
									}
								}
								that.$refs.keyboard.tapKeyboard(keyData.e);
								that.currentKey = value;
								setTimeout(() => {
									that.currentKey = "";
								}, 300);
							} else {
								if (that.mlbs_quick_answer_status == 1) {
									that.chooseFn(value);
								}
							}
						}
					}
				}
			},
			// 点击软键盘
			fnClickKeyboard(data) {
				var that = this;

				if (that.canClickHandler == false) {
					if (that.mlbs_answer.length == 1) {
						uni.showToast({
							title: '暂不可以点击',
							icon: 'none'
						})
						return false;
					}
				} else {
					that.canClickHandler = false;
					setTimeout(function() {
						// uni.showToast({
						// 	title: '可以点击了'
						// })
						that.canClickHandler = true;
					}, 500)
				}

				var currentKey = data.target;
				if (currentKey != 'del' && that.$util.isallowInput(currentKey)) {
					if (that.game_mode == '魔力部首|训练模式' || that.game_mode == '魔力部首|联机模式') {
						if (that.mlbs_user_id != that.user_info.id) {
							return false;
						} else {
							// 只有当自己本人作答的情况下才记录
							if (that.mlbs_user_id == that.user_info.id) {
								that.allowInput = false;
								var content = '点击字母按键';
								content = "#" + content + "#-" + that.downtime + ':' + that.mlbs_wordlist[0]
									.word + ':' + currentKey; // 60:word:r
								that.fnNotify(content);
								that.fnSendMessage(content);
							}
						}
					}
				}
			},
			fnCancelAlert() {
				var that = this;
				that.showAlertDialog = false;
				setTimeout(function() {
					uni.navigateBack({
						delta: 1, // 默认值是1，表示关闭当前页面
					});
				}, 500)
			},
			cancelAlert() {
				this.showMessageView = false;
			},

			fnPlayAnimation(type) {
				var that = this;
				if (type == 'success') {
					that.donghua = 'donghua_keai';
				}
				if (type == 'error') {
					that.donghua = 'donghua_ku';
				}
				if (type == 'shuohua') {
					that.donghua = 'donghua_shuohua';
				}
			},

			fnLeaveRoomV2() {
				var that = this;

				// 清除心跳定时器
				if (that.timer) {
					clearInterval(that.timer);
					that.timer = '';
				}

				that.fnConfirmLeave();
			},

			// 离开房间：
			// 开始前：如果是选手离开，则相当于退出房间，如果是群主离开房间，相当于是解散房间
			// 开始后：离开相当于离线，不退出
			fnLeaveRoom() {
				var that = this;

				// 清除心跳定时器
				if (that.timer) {
					clearInterval(that.timer);
					that.timer = '';
				}


				if (that.group_info.user_id == that.user_info.id) {
					// 如果是群主
					// 游戏未开始
					if (that.mlbs_gameStatus <= 1) {
						that.confirmMessage = "游戏未开始，离开房间后房间将解散，确定要离开房间吗？";
					} else {
						that.confirmMessage = "游戏已开始，确定要离开房间吗？";
					}
				} else {
					// 如果不是群主
					// 游戏未开始
					if (that.mlbs_gameStatus <= 1) {
						if (that.mlbs_gameStatus == 1) {
							that.confirmMessage = "游戏未开始，确定要离开房间吗？离开房间将取消准备";
						} else {
							that.confirmMessage = "游戏未开始，确定要离开房间吗？";
						}
					} else {
						that.confirmMessage = "游戏已开始，确定要离开房间吗？";
					}
				}

				that.showConfirmDialog = true;
			},



			// 确认离开房间
			fnConfirmLeave() {
				var that = this;

				var keyword = '离开房间';
				that.showConfirmDialog = false;

				if (that.audioContext) {
					that.audioContext.stop();
				}

				// 如果是群主
				if (that.group_info.user_id == that.user_info.id) {
					// 游戏未开始
					if (that.mlbs_gameStatus <= 1) {
						keyword = "解散房间";
					} else {
						keyword = "离开房间";
					}
				} else {
					// 如果不是群主
					// 游戏未开始
					if (that.mlbs_gameStatus <= 1) {
						if (that.mlbs_gameStatus == 1) {
							that.fnMyReady('取消准备');

							keyword = "退出房间";
						} else {
							keyword = "退出房间";
						}
					} else {
						keyword = "离开房间";
					}
				}

				that.showAlertDialog = true;
				that.loadingStatus = false;

				console.log(keyword);


				setTimeout(function() {
					// 离开房间
					var content = "#" + keyword + "#-" + JSON.stringify(that.test_wordlist);
					that.fnNotify("#" + keyword + "#");
					//发送消息
					that.fnSendMessage(content);
				}, 500)

				setTimeout(function() {
					that.isClose = true;
					that.socketTask.close();
				}, 1000)
			},

			// 取消离开房间弹框
			fnCancelLeave() {
				var that = this;

				that.showConfirmDialog = false;
			},

			fnCopyInviteUrl() {
				// 注意key=mlbs
				this.donghua = 'donghua_daiji';
				const url =
					`${this.$config.h5Link}share?key=mlbs&roomNum=${this.group_info.id}&gameId=${this.game_id}`
				this.$share.copyInviteUrl(url)
			},
			fnWeixinInvite() {
				const url =
					`${this.$config.h5Link}share?key=mlbs&roomNum=${this.group_info.id}&gameId=${this.game_id}`
				this.$share.weixinInvite(url, '魔力部首')
			},

			//1姓名 通过正则找到电话
			extractPhoneNumber(text) {
				const reg = /\d{11}/;
				const match = text.match(reg);
				const phoneNumber = match ? match[0] : '';
				return phoneNumber;
			},
			// 4去除特殊字符和前缀标识
			cleanText(text) {
				const cleanedText = text.replace(/\/|姓名：|手机号：|收货地址：|详细地址：/g, '');
				return cleanedText;
			},



			// 踢人
			fnTiRen(item, index) {
				var that = this;

				if (that.user_info.id != that.group_info.user_id) {
					return false;
				}
				that.tiren_user_id = item.user_id;
				that.showConfirmDialogOfTiren = true;
			},

			// 踢人确认弹框
			fnConfirmTiren() {
				var that = this;

				var content = '踢人';
				content = "#" + content + "#-" + that.tiren_user_id;
				that.fnNotify(content);
				that.fnSendMessage(content);

				that.showConfirmDialogOfTiren = false;
			},

			// 取消踢人确认弹框
			fnCancelTiren() {
				var that = this;
				that.tiren_user_id = '';
				that.showConfirmDialogOfTiren = false;
			},

			// 提交答案
			fnSubmit(data) {
				var that = this;

				// 重置
				if (that.audioContext) {
					// that.audioContext.src = '';
				}
				that.donghua = 'donghua_daiji';


				var word_info = that.mlbs_wordlist[0];
				if ('提交答案') {
					if (that.mlbs_inputting_content == '') {
						that.fnNotify('请先作答！');
						return false;
					}

					// 判斷是否正確
					var content = "#提交答案#-" + that.downtime + ":" + word_info.word + ":" + that
						.mlbs_inputting_content;
					// that.audioContext.stop();
					if (word_info.word == that.mlbs_inputting_content) {
						// 	that.donghua = 'donghua_keai';
						that.answer_status = "success";
						// 	setTimeout(function() {
						// 		that.audioContext.src = '/static/mp3/correct.mp3';
						// 		that.audioContext.play();
						// 	}, 500)
					} else {
						// 	that.donghua = 'donghua_ku';
						that.answer_status = "error";
						// 	setTimeout(function() {
						// 		that.audioContext.src = '/static/mp3/error.mp3';
						// 		that.audioContext.play();
						// 	}, 500)
					}

					that.fnNotify(content);
					//发送消息
					that.fnSendMessage(content);
				}
			},

			// 抢答
			fnQuiz() {
				if (this.mlbs_quick_answer_status == '0') {
					console.log('******点击了抢答按钮******')
					var content = "#抢答#"
					this.fnNotify(content);
					//发送消息
					this.fnSendMessage(content);
				}
			},


			// 他人提交答案
			fnSubmitV2(_ok_status) {
				var that = this;
				that.donghua = 'donghua_daiji';
				that.her_submit = true;
				if (that.game_mode != '魔力部首|训练模式') {
					that.test_wordlist[that.currentWordIndex].ok_status = _ok_status;
					that.audioContext.stop();
					if (_ok_status == 1) {
						// that.donghua = 'donghua_keai';
						setTimeout(function() {
							that.audioContext.src = '/static/mp3/correct.mp3';
							that.audioContext.play();
						}, 100)
					} else {
						setTimeout(function() {
							that.audioContext.src = '/static/mp3/error.mp3';
							that.audioContext.play();
						}, 100)
					}
				}
			},

			// 消息提示
			fnNotify(msg) {
				var that = this;
				msg = that.game_mode + msg;

				if (that.dev_btn_show == false) {
					return false;
				}
				that.$refs.uNotify.close()
				setTimeout(function() {
					that.$refs.uNotify.show({
						top: 50,
						type: 'error',
						color: '#000',
						bgColor: '#e8e8e8',
						message: msg,
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				}, 100)
			},

			// 开始按钮
			fnStart() {
				var that = this;

				if (that.$util.getNetWorkStatus() == false) {
					uni.showToast({
						'title': '网络异常',
						'icon': 'error'
					})
					return false;
				}

				if (that.isSuccess == false) {
					uni.showToast({
						'title': 'socket未准备好',
						'icon': 'error'
					})
					return false;
				}

				if (that.game_mode == '魔力部首|训练模式') {

				}
				if (that.game_mode == '魔力部首|联机模式') {
					if (that.yes_count != that.user_list.length) {
						if (that.yes_count < 2) {
							uni.showToast({
								title: '至少2个人才可以开始游戏',
								icon: 'none'
							})
							return false;
						}
						uni.showToast({
							title: '还有人未准备，不可以开始游戏',
							icon: 'none'
						})
						return false;
					}
					if (that.yes_count == that.user_list.length) {
						if (that.yes_count < 2) {
							uni.showToast({
								title: '至少2个人才可以开始游戏',
								icon: 'none'
							})
							return false;
						}
					}
				}

				that.loadingStatus = true;
				that.loadingText = '请稍后...';
				that.loadingBgColor = "#ffffff60";


				that.mlbs_gameStatus = 2;
				var content = '游戏开始';
				content = "#" + content + "#";
				that.fnNotify(content);
				that.fnSendMessage(content);
			},

			// 我准备
			fnMyReady(content) {
				var that = this;
				if (that.isSuccess == false) {
					uni.showToast({
						'title': 'socket未准备好',
						'icon': 'error'
					})
					return false;
				}

				if (that.user_info.id == '') {
					return false;
				}

				content = "#" + content + "#";
				that.fnNotify(content);
				that.fnSendMessage(content);
			},

			fnSendMessage(content) {
				var that = this;

				content = that.game_mode + content;
				// console.log('发送消息：' + content)

				//发送消息
				var message = {
					'type': 'chatMessage',
					'data': {
						"mine": {
							"username": that.user_info.username,
							"avatar": that.user_info.avatar,
							"id": that.user_info.id,
							"mine": true,
							"type": "group",
							"content": content
						},
						"to": {
							"id": that.group_info.id,
							"user_id": that.user_info.id,
							"avatar": that.group_info.avatar,
							"sign": that.group_info.sign,
							"groupname": that.group_info.groupname,
							"name": that.group_info.groupname,
							"type": "group"
						}
					}
				};
				that.sendSocketMessage(JSON.stringify(message)).then(res => {
					// console.log('测试数据成功~~~~~~~~~~~~')
				}).catch(res => {
					console.log('发送失败333')
					console.log((res))
				})
			},

			// // 准备按钮
			// fnReady(item, index) {
			// 	var that = this;
			// 	var content = '';
			// 	if (item.user_id == '') {
			// 		return false;
			// 	} else {
			// 		if (item.status == 0) {
			// 			content = '准备就绪';
			// 		}
			// 		if (item.status == 1) {
			// 			content = '取消准备';
			// 		}
			// 	}
			// 	content = "#" + content + "#";
			// 	that.fnNotify(content);
			// 	that.fnSendMessage(content);
			// },

			//连接websocket
			connectSocket() {
				let that = this;
				console.log('调用连接websocket')
				let token = uni.getStorageSync('TOKEN_YX');
				if (!that.user_info.id || !that.group_info.id) {
					that.fnNotify('参数异常');
					return false;
				}
				this.socketTask = uni.connectSocket({
					url: `ws://${that.$config.webSocketIp}:9999?token=${token}&user_id=${that.user_info.id}&group_id=${that.group_info.id}`,
					success(res) {
						console.log("websocket连接成功");
					},
					fail(err) {
						console.log("报错", err);
					}
				});
				this.socketTask.onOpen(function(res) {
					console.log('WebSocket连接已打开！');
					that.isSuccess = true
					// that.getStatus()
					that.heart()

					//发送消息
					setTimeout(function() {
						var content = '进入房间';
						content = "#" + content + "#-" + that.user_info.id;
						that.fnSendMessage(content);
					}, 500)
				})

				this.socketTask.onMessage(function(res) {
					// console.log('收到服务器内容：' + res.data);
					that.handlerServiceMsg(JSON.parse(res.data)) //这里是对获取到的数据进行操作
				});


				this.socketTask.onError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
					that.fnNotify('WebSocket连接打开失败，请检查！');
					that.isSuccess = false; // 在这里设置为 false

					//进入重新连接
					that.reconnect();
				})
				// // 监听连接关闭 -
				this.socketTask.onClose((e) => {
					console.log('WebSocket连接关闭！');
					clearInterval(that.timer)
					that.timer = null;
					that.isSuccess = false; // 在这里设置为 false
					that.reconnect()
				})
			},

			//进入重新连接
			reconnect() {
				var that = this;
				if (that.isClose == true) {
					return false;
				}

				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}

				if (that.$util.getNetWorkStatus() == true) {
					that.getGroupValidStatus();
				}

				// 如果 socketTask 存在并且连接是打开的，显式关闭它
				if (this.socketTask && this.socketTask.readyState === 1) { // WebSocket.OPEN
					this.socketTask.close();
				}

				this.socketTask = null;

				// 节流重连
				if (!this.reconnectThrottle) {
					this.reconnectThrottle = setTimeout(() => {
						this.connectSocket();
						this.reconnectThrottle = null;
					}, 3000); // 5秒后重试
				}
			},

			//发送消息
			sendSocketMessage(msg) {
				// console.log('发送信息')
				// console.log(msg + 'msg')
				return new Promise((reslove, reject) => {
					this.socketTask.send({
						data: msg,
						success(res) {
							// console.log('发送成功')
							reslove(res)
						},
						fail(res) {
							console.log('发送失败222')
							console.log(res)
							reject(res)
						}
					});
				})
			},

			//心跳
			heart() {
				let that = this;
				clearInterval(that.timer);
				that.timer = null;

				if (that.isSuccess) {
					that.timer = setInterval(() => {
						that.sendSocketMessage(JSON.stringify({
							"game": "mlbs",
							"heartbeat": heartbeat_count,
							"type": "heartbeat",
							"start_time": Date.now() / 1000
						})).then(res => {
							// console.log('心跳成功')
						}).catch(res => {
							console.log('发送失败')
							console.log((res))
						})
					}, 5000)
				}
			},

			//处理服务器返回数据
			handlerServiceMsg(data) {
				var that = this;

				// 网速检测
				if (data.type && data.type == 'heartbeat') {
					that.$util.checkInternetSpeed(data);
					return false;
				}

				if (data.type && data.type == 'ping') {
					return false;
				}
				var content = data.content;

				// console.log('################处理服务器返回数据:data-----', data, content)

				// 魔力部首
				if (content.includes(that.game_mode) && that.game_mode == '魔力部首|训练模式') {
					that.fn_mlbs_offline(data);
				}
				if (content.includes(that.game_mode) && that.game_mode == '魔力部首|联机模式') {
					that.fn_mlbs_online(data);
				}
			},

			// 魔力部首|方法处理
			fn_mlbs_offline(data) {
				var that = this;
				// console.log('################data', data)
				// 更新数据
				if ('更新数据') {
					if (data._ok_status == 0 || data._ok_status == 1) {
						that.mlbs_ok_status = data._ok_status;
					}
					that.mlbs_downtime5 = data._downtime5; // 5秒倒计时
					that.mlbs_quick_answer_status = data._quick_answer_status; // 是否可以抢答，0可以，1不可以
					that.mlbs_master_user_id = data._master_user_id; // 当前主用户的id   可能为0【机器人】
					that.mlbs_master_user_group_id = data._master_user_group_id; // 当前主用户的user_group_id  	同user_id,
					that.mlbs_user_id = data._user_id; // 当前用户的id   可能为0【机器人】
					that.mlbs_user_group_id = data._user_group_id; // 当前用户的user_group_id  	同user_id,
					that.mlbs_round = data._round; // 当前轮次
					that.mlbs_test_wordlist = data._test_wordlist; // 所有单词
					that.mlbs_wordlist = data._wordlist; // 当前轮次的单词信息
					that.mlbs_choice = data._choice;
					that.mlbs_answer = data._answer; // 暂时用不到
					that.mlbs_inputting_content = data._inputting_content; // 当前输入的内容
					console.log(data._inputting_content)
					that.mlbs_change_people_num = data._change_people_num; // 切换人次数
					that.mlbs_select_item = data._select_item; // 当前选手选中的选项
					that.mlbs_item = data._item; // 当前正确选项
					that.mlbs_type_id = data._type_id; // 创建时的分组id
					that.mlbs_qiangda3 = data._qiangda3
					if (data._question) {
						const arr = data._question.split(',')
						that.questionType = arr[0] ? 'rt' : 'lf'
						that.questionHy = arr[0] ? arr[0] : arr[1]
					} else {
						that.questionType = ''
						that.questionHy = ''
					}

					if (data._gameStatus && data._gameStatus != '') {
						that.mlbs_gameStatus = data._gameStatus; //游戏状态
					}

					that.user_list = data._total_user_info; // 所有用户列表
					// that.gameStatus = data._gameStatus;
					if (that.mlbs_gameStatus <= 3) {
						// 开始答题前：统计人数
						that.yes_count = 0;
						that.no_count = 0;
						that.none_count = 0;
						for (var i = 0; i < that.user_list.length; i++) {
							var item = that.user_list[i];
							// console.log('item--', item)
							if (item) {
								if (item.user_id == that.user_info.id) {
									that.current_user_info = item;
								}

								if (item.status >= 1) {
									that.yes_count++;
								} else {
									that.no_count++;
								}
							} else {
								that.user_list.push({
									sort: i + 1,
									user_id: '',
									username: '空位置',
									status: -1 // 1已准备 0未准备 -1占位
								});
								that.none_count++;
							}
						}
						// console.log('yes_count______', that.yes_count)
						// console.log('no_count______', that.no_count)

						that.fnNotify("gameStatus = " + that.mlbs_gameStatus);
					}
				}

				console.log('接收数据=kkkkkkkk' + '【' + that.$moment().format('ss') + '】', data)
				if (that.game_finished == 1) {
					return false;
				}
				var content = data.content;

				// // 显示线索，设置状态值
				// that.clueStatus = content.includes('#显示:线索1') || content.includes('#即将开始此轮比赛#') ? 1 : content.includes(
				// 	'#显示:线索2') ? 2 : content.includes('#显示:线索3') ? 3 : 4
				// // console.log(that.clueStatus, that.mlbs_wordlist)
				// // console.log(that.downtime_3)

				// if (content.includes('#显示:线索1')) {
				// 	that.downtime_3 = 1
				// 	that.quizBtnText = '抢答'
				// 	that.loadingStatus = false

				// 	// toast
				// 	// uni.showToast({
				// 	// 	title: '线索一',
				// 	// 	icon: 'none'
				// 	// })
				// }

				// // 播放词性
				// if (content.includes('#显示:线索2')) {
				// 	that.zhudongClick = false;
				// 	// that.fnPlayPartOfSpeechVoice();

				// 	// toast
				// 	// uni.showToast({
				// 	// 	title: '线索二',
				// 	// 	icon: 'none'
				// 	// })
				// }

				// // 播放定义
				// if (content.includes('#显示:线索3')) {
				// 	that.zhudongClick = false;
				// 	that.fnPlayDefinitionVoice();

				// 	// toast
				// 	// uni.showToast({
				// 	// 	title: '线索三',
				// 	// 	icon: 'none'
				// 	// })
				// }

				// 重新抢答前3s倒计时处理
				if (content.includes('#抢答前的3秒倒计时start')) {
					that.quizCountDown = true
					that.downtime_3 = 3 - data._downtime3;
					that.quizBtnText = that.downtime_3 + 1; // 抢答倒计时
				}

				if (content.includes('#抢答前的3秒倒计时')) {
					that.downtime_3 = 3 - data._downtime3;
					that.quizBtnText = that.downtime_3 + 1; // 抢答倒计时
				}

				if (content.includes('重新抢答')) {
					that.quizBtnText = '抢答'
					that.quizCountDown = false
					that.loadingStatus = false;
				}

				// 开始抢答前3s倒计时处理
				if (content.includes('#60秒前3秒倒计时start')) {
					that.quizCountDown = true
					that.downtime_3 = 1
					that.quizBtnText = '抢答'
					console.log('quizCountDown=====', that.quizCountDown)
				}

				if (content.includes('#60秒前3秒倒计时')) {
					// if (that.quizCountDown) {
					that.downtime_3 = 3 - data._downtime3;
					that.quizBtnText = that.downtime_3 + 1; // 抢答倒计时
					// }
				}

				if (content.includes('#60秒前3秒倒计时end')) {
					that.quizBtnText = '抢答'
					that.quizCountDown = false
					that.loadingStatus = false;
				}



				if (content.includes('【抢答成功】')) {
					that.isPosting = false
					if (that.mlbs_user_id == that.user_info.id) {
						// that.alertMessageStr = "抢答成功，开始答题";
						// that.showMessageView = true;
					} else {
						// that.alertMessageStr = "对方抢答成功，请等待";
						// that.showMessageView = true;
					}
				}
				if (content.includes('【选择正确，开始拼写】')) {
					// if (that.mlbs_user_id == that.user_info.id) {
					// 	that.alertMessageStr = "选择正确，开始拼写";
					// 	that.showMessageView = true;
					// }
				}
				if (content.includes('【未作答:回答错误】')) {
					that.isPosting = false
					if (that.mlbs_user_id == that.user_info.id) {
						// that.alertMessageStr = "您未作答，等待对方作答";
						// that.showMessageView = true;
					} else {
						if (Number(data._change_people_num) === 1) {
							that.alertMessageStr = "对方未作答，请您开始作答";
							that.showMessageView = true;
						}
					}
				}
				if (content.includes('【已作答:回答错误】')) {
					that.isPosting = false
					if (that.mlbs_user_id == that.user_info.id) {
						// that.alertMessageStr = "您选择错误，等待对方作答";
						// that.showMessageView = true;
					} else {
						if (Number(data._change_people_num) === 1) {
							that.alertMessageStr = "对方选择错误，请您开始作答";
							that.showMessageView = true;
						}
					}
				}
				if (content.includes('【操作成功】')) {
					this.isPosting = false
				}
				if (content.includes('【选择错误，重新开始抢答】')) {
					if (that.mlbs_user_id == that.user_info.id) {
						// that.alertMessageStr = "您选择错误，重新开始抢答";
						// that.showMessageView = true;
					} else {
						that.alertMessageStr = "对方选择错误，重新开始抢答";
						that.showMessageView = true;
					}
				}
				if (content.includes('【提交拼词错误，对方开始选择】')) {
					if (that.mlbs_user_id == that.user_info.id) {
						// that.alertMessageStr = "您拼词错误，等待对方作答";
						// that.showMessageView = true;
					} else {
						that.alertMessageStr = "对方拼词错误，请您开始作答";
						that.showMessageView = true;
					}
				}




				// 回答正确
				if (content.includes('【回答正确】')) {
					that.donghua = 'donghua_keai';
					setTimeout(function() {
						that.audioContext.stop();
						that.answer_status = "success";
						that.audioContext.src = '/static/mp3/correct.mp3';
						that.audioContext.play();
					}, 100)
				}

				// 回答错误
				if (content.includes('回答错误') || content.includes('【5秒内未作答】') || content.includes('选择错误，重新开始抢答')) {
					// if (that.mlbs_inputting_content.length === that.mlbs_word.length){
					that.donghua = 'donghua_ku';
					setTimeout(function() {
						that.audioContext.stop();
						that.answer_status = "error";
						that.audioContext.src = '/static/mp3/error.mp3';
						that.audioContext.play();
					}, 100)
					// }

				}

				// 选择错误
				if (content.includes('选择错误，对方开始选择')) {
					let msg = that.mlbs_user_id != that.user_info.id ? '对手选择错误，请选择' : '选择错误'
					// uni.showToast({
					// 	title: msg,
					// 	icon: 'none',
					// 	duration: 1000
					// })

					that.donghua = 'donghua_ku';
					setTimeout(function() {
						that.audioContext.stop();
						// that.answer_status = "error";
						that.audioContext.src = '/static/mp3/error.mp3';
						that.audioContext.play();
					}, 100)
				}

				// 要踢的人
				if (content.includes('要踢的人')) {
					var target_user_id = data._target_user_id;
					if (that.user_info.id == target_user_id) {
						that.user_list = data._total_user_info;
						for (var i = 0; i < that.user_list.length; i++) {
							if (that.user_list[i].user_id == target_user_id) {
								console.log('要踢的人', that.user_list[i])
								that.alertMessage = "房主已将您踢出该房间，将为您返回游戏大厅";
								that.showAlertDialog = true;
							}
						}
					}
					return false;
				}

				// 解锁命令
				if (content.includes('点击锁:true')) {
					uni.showToast({
						title: '可以继续点击啦vvvvvvvvvvvvvvv',
						icon: 'none'
					})
					that.canClickHandler = true;
					return false;
				}

				// 解锁命令
				if (content.includes('点击锁:false')) {
					uni.showToast({
						title: '不可以点击xxxxxxxxxxxxxxx',
						icon: 'none'
					})
					that.canClickHandler = false;
					return false;
				}

				// 重置时间
				if (content.includes('重置时间')) {
					that.downtime = 60;
					that.downtime_percentage = 100;
					return false;
				}


				// 解散房间
				if (content.includes('解散房间')) {
					that.showAlertDialog = true;
					// setTimeout(function() {
					// 	uni.redirectTo({
					// 		url: '/pages/games/index'
					// 	});
					// }, 500)
					return false;
				}

				// 退出房间
				if (content.includes('退出房间')) {
					that.user_list = data._total_user_info;
				}

				// 离开房间
				if (content.includes('离开房间')) {
					return false;
				}

				// 请求轮次答题信息列表异常
				if (content.includes('请求轮次答题信息列表异常')) {
					that.fnNotify('请求轮次答题信息列表异常');
					uni.showToast({
						title: '请求轮次答题信息列表异常',
						icon: 'error'
					})
					return false;
				}

				// 比赛结束：冠军出来啦
				if (that.mlbs_round == that.mlbs_test_wordlist.length && content.includes('#比赛结束#')) {
					that.finishShow = true;
					that.allFinished = true;
					that.currentTipMsg = "完成";
					that.loadingStatus = false

					// 判断优胜的选手，给出烟花和音效，优胜
					console.log(that.user_list, that.user_info)
					const arr = that.user_list
					let maxValue = Math.max(...arr.map(item => Number(item.yes_num)));
					console.log(maxValue); // 输出最高分
					const maxList = arr.filter(item => Number(item.yes_num) === maxValue)
					console.log(maxList)
					maxList.forEach(item => {
						if (item.user_id == that.user_info.id && Number(item.yes_num) > 0) {
							that.yanhuaShow = true
							that.currentTipMsg = '优胜'
						}
					})

					return false;
				}
				if (content.includes('机器人单词全拼')) {
					that.donghua = "donghua_daiji";
					that.answer_status = "";
				}
				// 本轮数据统计中
				if (content.includes('本轮数据统计中')) {
					that.finishShow = true;
					that.allFinished = true;
					that.currentTipMsg = "本轮完成";
					return false;
				}

				// 机器人提交答案
				if (content.includes('#机器人提交答案#')) {
					var _ok_status = data._ok_status;
					that.fnSubmitV2(_ok_status);
					return false;
				}

				// 其他真人提交答案
				if (content.includes('#其他真人提交答案#')) {
					var _ok_status = data._ok_status;
					that.fnSubmitV2(_ok_status);
					return false;
				}

				// 成功切换至下一任
				// if (content.includes('成功切换至下一个人')) {
				// 	this.allowInput = true;
				// 	that.donghua = "donghua_daiji";
				// 	that.answer_status = "";
				// }

				// 当前轮次信息展示
				if (content.includes('当前轮次信息展示:true')) {
					that.user_list = data._total_user_info;
					that.tip_close_time = data._tip_close_time;
					that.tip_round = data._tip_round;
					that.currentRoundInfoShow = true;


					console.log(that.tip_round, that.tip_close_time);

					// that.jinji_user_list = [];
					// that.taotai_user_list = [];
					// for (var i = 0; i < that.user_list.length; i++) {
					// 	if (that.user_list[i].is_promotion == 1) {
					// 		that.jinji_user_list.push(that.user_list[i]);
					// 	} else {
					// 		that.taotai_user_list.push(that.user_list[i]);
					// 	}
					// }
					return false;
				}

				// 当前轮次信息展示
				if (content.includes('当前轮次信息展示:false')) {
					that.currentRoundInfoShow = false;

					return false;
				}




				if (data._gameStatus) {
					that.mlbs_gameStatus = data._gameStatus;
				}


				if (data._currentWordIndex >= 0) {
					that.currentWordIndex = data._currentWordIndex;
					// console.log("===题库长度：", that.test_wordlist.length, "===当前索引：", that.currentWordIndex + 1)
					if (that.test_wordlist.length > 0) {
						if (that.test_wordlist.length < that.currentWordIndex + 1) {
							// console.log("(that.test_wordlist.length > that.currentWordIndex + 1", that.test_wordlist
							// 	.length,
							// 	that.currentWordIndex + 1)
							that.allFinished = true;
							that.finishShow = true;
						} else {
							that.allFinished = false;
							that.finishShow = false;
						}
					}
				}

				// 更新数据
				if (data._total_user_info) {
					that.user_list = data._total_user_info;

					// 开始答题前：统计人数
					that.yes_count = 0;
					that.no_count = 0;
					that.none_count = 0;
					for (var i = 0; i < that.user_list.length; i++) {
						var item = that.user_list[i];
						// console.log('item--', item)
						if (item) {
							if (item.user_id == that.user_info.id) {
								that.current_user_info = item;
							}

							if (item.status >= 1) {
								that.yes_count++;
							} else {
								that.no_count++;
							}
						} else {
							that.user_list.push({
								sort: i + 1,
								user_id: '',
								username: '空位置',
								status: -1 // 1已准备 0未准备 -1占位
							});
							that.none_count++;
						}
					}
					that.fnNotify("gameStatus = " + that.mlbs_gameStatus);
				}

				// 进入房间
				if (content.includes('进入房间')) {
					that.loadingStatus = false;
					var enterer_userId = content.split('-')[1];
					console.log('################data', data)
					if (enterer_userId == that.user_info.id) {
						// console.log('是本人！！！！！！！！！！！！！！！！！！', enterer_userId)
					}
				}

				// 拼错发音官发音
				if (content.includes('播放错误音频提示start')) {
					var that = this;
					that.donghua = 'donghua_ku';
					that.answer_status = "error";
					setTimeout(function() {
						that.audioContext.src = '/static/mp3/error.mp3';
						that.audioContext.play();
					}, 100)
				}
				// 拼错发音官发音结束
				if (content.includes('播放错误音频提示end')) {
					that.mlbs_inputting_content = '';
					that.her_currentAnswer = '';
					that.loadingStatus = false;
				}

				// 60秒倒计时， 游戏结束
				if (content.includes('#比赛进行中#')) {
					if (that.isPlaySecondWord == true) {
						that.loadingStatus = false;
						that.isPlaySecondWord = false;
						that.isShowVoicePopView = false;
					}
					that.downtime = 60 - data._downtime60;
					that.downtime_percentage = parseInt(that.downtime / 60 * 100);
					if (that.downtime == 0) {
						that.mlbs_gameStatus = 5;
					}
					that.answer_status = ""
				}

				// 本轮信息：轮次			
				if (content.includes('本轮信息：轮次')) {
					that.finishShow = false;
					that.allFinished = false;
					// that.group_info.zubieEnName = data._zubieEnName;
					// that.group_info.zubieName = data._zubieName;
				}

				// 该轮结束
				if (content.includes('该轮结束')) {
					that.mlbs_inputting_content = '';
					that.her_currentAnswer = '';
					// that.finishShow = true;
					// that.allFinished = true;
					// that.currentTipMsg = "该轮结束";
				}

				// 比赛结束
				if (content.includes('完成比赛')) {
					that.finishShow = true;
					that.allFinished = true;
					that.currentTipMsg = "完成";
				}

				// 提交答案
				if (content.includes('submit')) {
					that.canSubmit = true;
				}

				// 播放字母音频
				if (content.includes('keydown_')) {
					var key = content.split('_')[1];
					that.her_currentAnswer += key;
					// console.log(that.her_currentAnswer)
				}

				// 播放音频pinyin
				if (content.includes('play_pinyin')) {
					that.zhudongClick = false;
					// uni.showToast({
					// 	title: 'Play Pinyin',
					// 	icon: 'none'
					// })
					that.fnPlayWordVoice();
				}

				// 播放音频definition
				if (content.includes('play_definition')) {
					that.zhudongClick = false;
					// uni.showToast({
					// 	title: 'Play Definition',
					// 	icon: 'none'
					// })
					that.fnPlayDefinitionVoice();
				}

				// 播放音频sentence
				if (content.includes('play_sentence')) {
					that.zhudongClick = false;
					// uni.showToast({
					// 	title: 'Play Sentence',
					// 	icon: 'none'
					// })
					that.fnPlaySentenceVoice();
				}

				// 提交答案
				if (content.includes('#提交答案#')) {
					// 开始答题后：统计答题正确率
					console.log('提交答案');
				}
				// 单轮结束
				if (content.includes('#单词整拼公布#')) {
					var that = this;
					that.donghua = 'donghua_daiji';
					if (that.game_mode != '魔力部首|训练模式') {
						that.audioContext.stop();
						if (that.mlbs_ok_status == 1) {
							that.donghua = 'donghua_keai';
							that.answer_status = "success";
							setTimeout(function() {
								that.audioContext.src = '/static/mp3/correct.mp3';
								that.audioContext.play();
							}, 100)
						}
						// else {
						// 	that.donghua = 'donghua_ku';
						// 	that.answer_status = "error";
						// 	setTimeout(function() {
						// 		that.audioContext.src = '/static/mp3/error.mp3';
						// 		that.audioContext.play();
						// 	}, 100)
						// }
					}
				}
				// 单个单词
				if (content.includes('#字母单拼结果#')) {
					var that = this;
					// that.donghua = 'donghua_daiji';
					if (content.includes('未拼写')) {
						that.donghua = 'donghua_ku';
						that.answer_status = "error";
						setTimeout(function() {
							that.audioContext.src = '/static/mp3/error.mp3';
							that.audioContext.play();
						}, 100)
						return;
					}
					if (that.game_mode != '魔力部首|训练模式') {
						that.audioContext.stop();
						var word_info = that.mlbs_wordlist[0];
						if (that.mlbs_inputting_content == word_info.word) {
							that.donghua = 'donghua_keai';
							that.answer_status = "success";
							setTimeout(function() {
								that.audioContext.src = '/static/mp3/correct.mp3';
								that.audioContext.play();
							}, 100)
							return;
						}
						if (that.mlbs_ok_status == 1) {
							that.donghua = 'donghua_keai';
							that.answer_status = "success";
							setTimeout(function() {
								that.audioContext.src = '/static/mp3/correct.mp3';
								that.audioContext.play();
							}, 100)
						} else {
							that.donghua = 'donghua_ku';
							that.answer_status = "error";
							setTimeout(function() {
								that.audioContext.src = '/static/mp3/error.mp3';
								that.audioContext.play();
							}, 100)
						}
					}
				}
				// 播放第一遍word
				if (content.includes('#播放第一遍word#')) {
					// 开始答题后：统计答题正确率
					this.loadingStatus = true;
					this.isShowVoicePopView = true;
				}
				// 播放第二遍word
				if (content.includes('#播放第二遍word#')) {
					// 开始答题后：统计答题正确率
					this.isPlaySecondWord = true;
				}
				// 播放第一遍，关闭弹窗
				if (content.includes('#播放第一遍#')) {
					// 开始答题后：统计答题正确率
					this.showMessageView = false;
				}
				// 对方答错，我方显示全拼提示弹窗
				if (content.includes('#字母单拼结果#')) {
					var arr = content.split("-");
					if (arr.length > 4) {
						if (arr[3] == '0') {
							if (that.mlbs_user_id == that.user_info.id) {
								that.showMessageView = true;
								that.alertMessageStr = '您已答错，对方获得全拼机会！';
							} else {
								that.showMessageView = true;
								that.alertMessageStr = '对方拼错，您获得此次全拼机会！';
							}
						}
					}
				}
				// 3秒倒计时， 游戏开始
				if (content.includes('#3秒倒计时#')) {
					that.loadingStatus = true;
					that.downtime_3 = 3 - data._downtime3;
					that.startBtnText = that.downtime_3 + 1;
					that.readyBtnText = that.downtime_3 + 1;
				}
				// 4秒倒计时开始
				if (content.includes('#4秒倒计时#')) {
					that.countdownMessage = `${4 - data._downtime4}s 后进入下一轮`;
				}
				if (content.includes('#即将切换至下一轮start#')) {
					that.showCountdownDialog = true;
					that.donghua = "donghua_daiji";
					that.answer_status = "";
					that.showMessageView = false;
					that.downtime = 60;
					that.downtime_percentage = 100;
					that.loadingStatus = false
				}
				if (content.includes('#即将切换至下一轮end#')) {
					that.showCountdownDialog = false;
				}
			},
			// 答错后播放裁判发音
			fnPlayErrorVoice(wordInfo) {
				var that = this;
				that.donghua = 'donghua_ku';
				that.answer_status = "error";
				setTimeout(function() {
					that.audioContext.src = '/static/mp3/error.mp3';
					that.audioContext.play();
					setTimeout(function() {
						that.mlbs_inputting_content = wordInfo.word;
						that.her_currentAnswer = wordInfo.word;
						that.loadingStatus = true;
						that.isShowVoicePopView = true;
						if (that.audioContext) {
							that.audioContext.stop();
							setTimeout(function() {
								// that.audioContext.src = wordInfo.error_url2;
								that.audioContext.src = that.$util.wordErrorVoiceUrl(wordInfo
									.word);
								that.audioContext.play();
							}, 100)
						}
					}, 500);
				}, 100)
			},
			// 魔力部首|联机模式
			fn_mlbs_online(data) {
				var that = this;
				that.fn_mlbs_offline(data);
			},

			// 获取房间数据
			// getMatchStatusInfo() {
			// 	var that = this;
			// 	that.$http.getMatchStatusInfo({
			// 		'group_id': that.group_info.id
			// 	}).then(res => {
			// 		// console.log('1*******1')
			// 		console.log(res)
			// 		if (res.code === 200) {
			// 			if (res.data == true) {
			// 				that.allFinished = true;
			// 			}
			// 		} else {

			// 		}
			// 	})
			// },

			// 用户主动点击播放单词
			fnPlayWordVoiceV2() {
				var that = this;
				console.log(11111111111)
				console.log(that.mlbs_user_id, that.user_info.id)
				if (that.mlbs_user_id == that.user_info.id) {
					that.playType = 'word';
					var word_info = that.mlbs_wordlist[0];
					that.zhudongClick = true;
					if (that.audioContext) {
						that.audioContext.stop();
						setTimeout(function() {
							that.audioContext.src = word_info.pinyinUrl;
							that.audioContext.play();
						}, 500)
					}

					var content = 'play_word';
					content = "#" + content + "#";
					that.fnNotify(content);
					that.fnSendMessage(content);
				}
			},

			// 播放音频word
			fnPlayWordVoice() {
				var that = this;
				that.playType = 'word';
				// console.log(that.mlbs_wordlist)
				var word_info = that.mlbs_wordlist[0];
				if (that.audioContext) {
					that.audioContext.stop();
					setTimeout(function() {
						that.audioContext.src = word_info.pinyinUrl;
						that.audioContext.play();
					}, 500)
				}
			},

			// 播放音频definition
			fnPlayDefinitionVoiceV2() {
				var that = this;
				if (that.mlbs_user_id == that.user_info.id) {
					that.playType = "definition";
					var word_info = that.mlbs_wordlist[0];

					if (that.audioContext) {
						that.audioContext.stop();
						setTimeout(function() {
							that.audioContext.src = word_info.definitionUrl;
							that.audioContext.play();
						}, 500)
					}

					var content = 'play_definition';
					content = "#" + content + "#";
					that.fnNotify(content);
					that.fnSendMessage(content);
				}
			},

			// 播放音频definition
			fnPlayDefinitionVoice() {
				var that = this;
				that.playType = "definition";
				var word_info = that.mlbs_wordlist[0];

				if (that.audioContext) {
					that.audioContext.stop();
					setTimeout(function() {
						that.audioContext.src = word_info.definitionUrl;
						that.audioContext.play();
					}, 500)
				}
			},

			// 播放音频sentence
			fnPlaySentenceVoiceV2() {
				var that = this;
				if (that.mlbs_user_id == that.user_info.id) {
					that.playType = "sentence";
					var word_info = that.mlbs_wordlist[0];

					if (that.audioContext) {
						that.audioContext.stop();
						setTimeout(function() {
							that.audioContext.src = word_info.sentenceUrl;
							that.audioContext.play();
						}, 500)
					}

					var content = 'play_sentence';
					content = "#" + content + "#";
					that.fnNotify(content);
					that.fnSendMessage(content);
				}
			},

			// 播放音频sentence
			fnPlaySentenceVoice() {
				var that = this;
				that.playType = "sentence";
				var word_info = that.mlbs_wordlist[0];

				if (that.audioContext) {
					that.audioContext.stop();
					setTimeout(function() {
						that.audioContext.src = word_info.sentenceUrl;
						that.audioContext.play();
					}, 500)
				}
			},

			//完成比赛
			fnFinishGame() {
				var that = this;
				that.game_finished = 1;
				that.finishShow = false;


				that.isClose = true;
				that.socketTask.close();

				clearInterval(that.timer)
				that.timer = null;

				uni.redirectTo({
					url: '/pages/games/mlbs/game_mlbs_rank?group_id=' + that.group_info.id +
						'&game_mode=' +
						that
						.game_mode
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.answer-area {
		display: flex;
		align-items: center;
		justify-content: center;

		.answer-box {
			width: 90px;
			height: 90px;
			border: 3px solid #fbd46f;
			background: linear-gradient(to bottom, #130e00, #373632);
			border-radius: 10px;
			margin: 10px 5px;
			color: #fff;
			font-size: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.answer-half {
			font-size: 50px;
			color: #fff;
		}
	}

	.answer_success .answer-box {
		background: #3432af;
	}

	.answer_error .answer-box {
		background: #df2720;
	}

	.rank-scroll-back {
		width: 80%;
		height: 50%;
		background: linear-gradient(to right, #fff497, #ffd16b);
		background-color: white;
		margin: 30% auto;
		border-radius: 20px;
	}

	.rank-bg {
		width: 100%;
		height: 100%;
		background-image: url(../../../static/image/homePage/diwen1.png);
		background-size: 100% auto;
		background-repeat: repeat-y;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 10px 20px;
	}

	.rank-popview {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;

		.rank-title {
			width: 100%;
			font-size: 20px;
			font-family: hzgb;
			text-align: center;
			margin-top: 10px;
		}

		.rank-second {
			width: 100%;
			font-size: 12px;
			font-family: hzgb;
			text-align: center;
			margin-top: 5px;
		}

		.rank-content-title {
			width: 90%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.player-info-title {
				width: 70%;
				text-align: left;
				font-size: 14px;
				font-family: hzgb;
			}

			.promotion-title {
				width: 30%;
				text-align: right;
				font-size: 14px;
				font-family: hzgb;
			}
		}

		.line-view {
			width: 100%;
			height: 1px;
			margin: 10px 0px;
			background: #000;
		}

		.user-back {
			width: 100%;
			display: flex;
			flex-direction: column;
		}

		.userInfo-back {
			width: 100%;
			height: 40px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.userInfo-left {
				width: 75%;
				overflow: hidden;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.avatar {
					width: 40px;
					height: 40px;
					flex-shrink: 0;
				}

				.userinfo-class {
					width: auto;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					margin-left: 8px;

					.userinfo-name {
						font-size: 12px;
						font-family: hzgb;
						margin-bottom: 5px;
						color: #000;
					}

					.userinfo-num {
						min-height: 20px;
						word-break: break-all;
						// 换行
						// display: flex;
						// align-items: center;
						// justify-content: center;
						padding: 3px 10px;
						border-radius: 30px;
						background: #000;
						color: white;
						font-size: 10px;
						font-family: hzgb;
						text-align: left;
						overflow: hidden;
						// 不换行，1行显示超出...
						-webkit-line-clamp: 1;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						line-height: 20px;
					}
				}
			}

			.promotionStr {
				width: 25%;
				padding-left: 10px;
				box-sizing: border-box;
				text-align: left;
				font-weight: 600;
				font-size: 15px;
			}
		}
	}

	.startable {
		color: white !important;
	}

	.fangzu {
		background: #f73c6a !important;
		color: white !important;
		position: relative;

		.huangguan {
			position: absolute;
			height: 20px;
			width: 20px;
			left: -9px;
			top: -12px;
		}
	}

	.page-bg-hy {
		background: radial-gradient(circle, #373632, #130e00);
		width: 100%;
		height: 100vh;
	}

	.page-hy {
		// background-image: url(/static/image/app/gameBg.png);
		// // background-color: #f7b52c;
		// background-size: 100% 100%;
		// background-position: top left;
		// background-repeat: no-repeat;
		background-image: url(/static/image/homePage/diwen-hy.png);
		background-size: 100px 100px;
		background-position: center;
		width: 100%;
		height: 100vh;
		position: relative;
		text-align: center;

		.input-content-back {
			width: 100px;
			height: 1px;
			position: absolute;
			top: -200px;

			.input-class {
				width: 100px;
				height: 10px;
			}
		}
	}


	.btn-style {
		margin: 3px auto;
		background: linear-gradient(to top, #fff497, #ffd16b);
		border-radius: 25px;
		color: black;
		font-family: hzgb;
	}

	.btn-style2 {
		margin: 3px auto 10px;
		border-radius: 25px;
		font-weight: bold;
	}

	.pass-btnback {
		width: 64px;
		height: 64px;
		border-radius: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to bottom, #b6359c, #ef0a6a);

		.pass-btn {
			width: 56px;
			height: 56px;
			line-height: 56px;
			text-align: center;
			color: white;
			font-size: 16px;
			border-radius: 30px;
			background: linear-gradient(to bottom, #ef0a6a, #b6359c);
		}
	}

	.pass {
		background-image: url(/static/image/app/pass.png);
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		height: 90px;
		width: 80px;
		margin: 0 auto;
		color: white;
		font-size: 20px;
		font-weight: bold;
		line-height: 90px;
		z-index: 9999999;
		position: absolute;
		top: 3px;
		left: 3px;
	}

	.invite_copy {
		background-image: url(/static/image/app/invite_copy.png);
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		width: 135px;
		color: white;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		font-family: hzgb;
	}

	.invite_weixin {
		background-image: url(/static/image/app/invite_weixin.png);
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		width: 135px;
		color: black;
		font-weight: bold;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		font-family: hzgb;
	}

	.main {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.level_item {
			overflow: hidden;
		}
	}

	.level_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90px;
		width: 100%;
		overflow: hidden;
		background: linear-gradient(to bottom, #1c170d, #373632);
	}

	.mifeng {
		position: relative;
		z-index: 99;
	}

	.level_2 {
		flex: 1;
		color: white;
		// background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.33), rgba(128, 128, 128, 0.17));
		// background-image: url(/static/image/app/test_end_new.png);
		background-size: 100% 100%;
		background-position: bottom center;
		background-repeat: no-repeat;
		position: relative;

		.yellow_door {
			position: absolute;
			left: 60px;
			right: 60px;
			bottom: 0;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			border: 3px solid #ffd16b;
			height: 260px;
			border-radius: 150px 150px 0 0;
			z-index: 0;

			.yellow_door_bg {
				background-image: url(/static/image/homePage/diwen-hy-yellow.png);
				background-size: 100px;
				width: 100%;
				height: 100%;
				border-radius: 150px 150px 0 0;

			}
		}

		.play-btns {
			position: absolute;
			left: 60px;
			right: 60px;
			z-index: 1001;
			bottom: 60px;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;

			.ope-rt {
				width: 66px;
				color: #000;
				margin-bottom: 10px;

				.play-btn-icon {
					height: 32px;
				}
			}

			&.canClick {
				z-index: 1005;
			}
		}

		.create_room_btn {
			width: 200px;
			color: black;
			font-weight: bold;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 0 auto;
			margin-top: 20px;
		}

		.show_room_btn {
			width: 100px;
			margin: 20px auto;
			margin-top: 50px;
			border-radius: 21px;
			background-position: center center;
			background-size: 100% 100%;
			height: 35px;
			line-height: 35px;
			color: black;
			font-weight: bold;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0px 7px 0px 0px #d1a54d;
		}

		.room_box {
			display: flex;
			flex-direction: column;

			height: auto;
			margin: 20px;

			.room_search {
				display: flex;
				flex-direction: row;
				background: yellow;
				border-radius: 20px;
				height: 32px;
				line-height: 32px;
				justify-content: center;
				align-items: center;
				padding: 0px 3px;

				.search_left {
					width: 50px;
					background-image: url(/static/image/app/fangdajing.png);
					height: 50px;
					background-size: 22px;
					background-repeat: no-repeat;
					background-position: center center;
				}

				.search_center {
					flex: 1;
				}

				.search_right {
					width: 60px;
					background: black;
					border-radius: 20px;
					height: 26px;
					line-height: 26px;
				}
			}
		}
	}

	.level_3 {
		height: 235px;
		// height: 435px;
		min-height: 235px;
	}

	.qiangda-area {
		height: 160px;
		padding-top: 10px;
		box-sizing: border-box;
		position: fixed;
		z-index: 1001;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
	}

	.countdown {
		position: fixed;
		z-index: 1000;
		bottom: 40px;
		left: 0;
		right: 0;
		color: #fff;
		font-family: hzgb;
		font-size: 14px;
		text-align: center;
		height: 30px;
	}

	.zhanwei {
		width: 100%;
		height: 88px;
	}

	.flex(@direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: @direction;
	}

	// 使用示例
	.element {
		.flex(row);
	}

	.scroll-list {
		.scroll-list__goods-item {
			margin: 10px 10px;
			text-align: center;
			background: linear-gradient(to bottom, #130e00, #373632);
			padding: 8px 4px;
			border-radius: 6px;
			font-family: hzgb;
			border: 3px solid #ffffff00;

			.score-view {
				width: 100%;
				text-align: center;
				font-size: 10px;
				margin-top: 5px;
				color: white;
			}

			.scroll-list__goods-item__text {
				color: #000;
				text-align: center;
				font-size: 12px;
				white-space: nowrap;
			}
		}

		.scroll-list__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			.scroll-list__show-more__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		.ok-btn {
			background: linear-gradient(to top, #fff497, #ffd16b);
			border-radius: 10px;
			padding: 3px 9px;
			color: black;
			font-weight: bold;
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 300px;
		height: 300px;
		// background-image: url(../../../static/image/done.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		font-family: hzgb;
		color: #ffd571;
		text-align: center;
		padding-top: 104px;
		font-size: 36px;


	}

	.active-user {
		border: 3px solid #ffd16b !important;

	}


	.wrong {
		border: 3px solid #e2291c !important;
	}

	.right {
		border: 3px solid #3230a7 !important;
	}

	.isPad {
		.answer-area {
			margin-bottom: 20px;

			.answer-box {
				width: 120px;
				height: 120px;
				font-size: 60px;
			}
		}

		.word-item {
			width: 120px;
			height: 120px;
			font-size: 60px;
		}

		.clue-show {
			width: 282px
		}

		.btn-style2 {
			margin-bottom: 30px;
		}

		.level_2 {
			.yellow_door {
				left: 90px;
				right: 90px;
				border-radius: 250px 250px 0 0;
				height: 560px;
			}

			.yellow_door_bg {
				border-radius: 250px 250px 0 0;
			}

			.play-btns {
				left: 100px;
				right: 100px;
				bottom: 130px;

				.ope-rt {
					width: 100px;
				}

				.btn-text {
					font-size: 14px;
				}

				.play-btn-icon {
					height: 48px;
				}
			}
		}
	}
</style>
<style lang="scss">
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}

	.fengzai {
		position: relative;
		top: -84px;
	}

	.ope {
		position: absolute;
		top: 138px;
	}




	.btn-text {
		font-size: 12px;
		font-family: hzgb;
		margin-top: 4px;
	}

	.promotion {
		color: green;
	}

	.elimination {
		color: red;
	}

	.download-second {
		width: 100%;
		text-align: center;
		color: white;
		font-size: 15px;
		font-weight: 700;
		z-index: 20px;
		position: absolute;
		top: 10px;
	}

	.speech-back {
		height: 60px;
		width: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 21px;
		position: relative;

		.speech-class {
			height: 42px;
			width: 42px;
			background: var(--navBottomBackColor);
			border-radius: 21px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 10;

			.speech-sen-class {
				height: 35px;
				width: 35px;
				background: var(--navBackColor);
				border-radius: 21px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.circle1,
		.circle2,
		.circle3 {
			height: 42px;
			width: 42px;
			background: var(--navBottomBackColor);
			border-radius: 21px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 9;
		}



		.circle1 {
			animation-delay: 0.1s;
		}

		.circle2 {
			animation-delay: 0.2s;
		}

		.circle3 {
			animation-delay: 0.3s;
		}
	}

	@keyframes circleChange {
		0% {
			transform: scale(1.3);
			opacity: 0.8;
		}

		25% {
			transform: scale(1.6);
			opacity: 0.6;
		}

		50% {
			transform: scale(1.9);
			opacity: 0.4;
		}

		75% {
			transform: scale(2.2);
			opacity: 0.22;
		}

		100% {
			transform: scale(2.5);
			opacity: 0.05;
		}
	}


	.clue-show {
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		border: 3px solid #373632;
		border-radius: 20px;
		margin: 4px auto;
		padding: 12px;
		min-width: 140px;
		display: inline-block;
		width: 241px;
		position: relative;
		z-index: 100;
	}

	.word-item {
		background: linear-gradient(to bottom, #130e00, #373632);
		text-align: center;
		width: 100px;
		height: 100px;
		border-radius: 10px;
		color: #fff;
		font-size: 50px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid #130e00;
	}

	.active {

		background: linear-gradient(to bottom, #ffd16b, #fff497);
	}

	.sqpp-options {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 70%;
		margin: 14px auto;

		.sqpp-opt {
			/* 设置元素的宽高 */
			width: 40px;
			height: 40px;
			border-radius: 40px;
			/* 设置背景渐变 */
			background-image: linear-gradient(to bottom, #373632, #130e00);
			display: flex;
			align-items: center;
			justify-content: center;

			.sqpp-opt-in {
				width: 32px;
				height: 32px;
				border-radius: 32px;
				background-image: linear-gradient(to bottom, #130e00, #373632);
				display: flex;
				align-items: center;
				justify-content: center;

				.sqpp-opt-circle {
					width: 28px;
					height: 28px;
					border-radius: 28px;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2px solid #fff;
					font-size: 18px;
					font-family: hzgb;
				}
			}
		}

		.sqpp-opt-active {
			background: linear-gradient(to bottom, #b6359c, #ef0a6a);
			;

			.sqpp-opt-in {
				background: linear-gradient(to bottom, #ef0a6a, #b6359c);

				.sqpp-opt-circle {
					border-color: transparent;
				}
			}
		}
	}

	.qiangdabtn {
		position: absolute;
		width: 100%;
		justify-content: center;
		height: 100%;
		display: flex;
		font-size: 23px;
		align-items: center;
		font-family: hzgb;
		color: #fff;
	}

	.qiangda-time {
		position: absolute;
		bottom: 22px;
		width: 100%;
		text-align: center;
		margin-top: 10px;
		color: #fff;
		font-family: hzgb;
		font-size: 18px;
	}
</style>